---
title: Tabs
description: Easily create accessible, fully customizable tab interfaces, with robust focus management and keyboard navigation support.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="headless-tabs-demo" />

## Installation

<ComponentInstallation name="headless-tabs" />

## Usage

```tsx
<TabGroup>
  <TabList>
    <Tab index={0}>Tab 1</Tab>
    <Tab index={1}>Tab 2</Tab>
    <Tab index={2}>Tab 3</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>Tab 1 Content</TabPanel>
    <TabPanel>Tab 2 Content</TabPanel>
    <TabPanel>Tab 3 Content</TabPanel>
  </TabPanels>
</TabGroup>
```

## Props

<div className="flex flex-row gap-x-3">
  <ExternalLink href="https://headlessui.com/react/tabs" text="Docs" />
  <ExternalLink
    href="https://headlessui.com/react/tabs#component-api"
    text="API Reference"
  />
</div>

### Animate UI props

## Credits

- We use [Headless UI](https://headlessui.com/react/tabs) for the tabs component.
- We take our inspiration from [Shadcn UI](https://ui.shadcn.com/docs/components/tabs) for the tabs style.