48 lines
1.1 KiB
Plaintext
48 lines
1.1 KiB
Plaintext
---
|
|
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.
|