export const title = "Tab components"
export const description = "Free and open-source React tab components built for modern applications and websites. These tabs are built using React Aria and styled with Tailwind CSS."
export const links = {
    github: "https://github.com/untitleduico/react/tree/main/components/application/tabs",
    rac: "https://react-spectrum.adobe.com/react-aria/Tabs.html"
}

import * as Demos from "@/components/application/tabs/tabs.demo.tsx";

<PreviewAndCode title="Tabs example">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ButtonMinimalHorizontalDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="tabs/ButtonMinimalHorizontalDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this tabs component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add tabs
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="application/tabs" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the tabs components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Tabs examples

Below are examples and variations of this tabs component:

### Button brand horizontal {{ tocOnly:true }}

<PreviewAndCode title="Button brand horizontal">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ButtonBrandHorizontalDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="tabs/ButtonBrandHorizontalDemo" />
    </TabPanel>
</PreviewAndCode>

### Button gray horizontal {{ tocOnly:true }}

<PreviewAndCode title="Button gray horizontal">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ButtonGrayHorizontalDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="tabs/ButtonGrayHorizontalDemo" />
    </TabPanel>
</PreviewAndCode>

### Button border horizontal {{ tocOnly:true }}

<PreviewAndCode title="Button border horizontal">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ButtonBorderHorizontalDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="tabs/ButtonBorderHorizontalDemo" />
    </TabPanel>
</PreviewAndCode>

### Button minimal horizontal {{ tocOnly:true }}

<PreviewAndCode title="Button minimal horizontal">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ButtonMinimalHorizontalDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="tabs/ButtonMinimalHorizontalDemo" />
    </TabPanel>
</PreviewAndCode>

### Underline {{ tocOnly:true }}

<PreviewAndCode title="Underline">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.UnderlineDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="tabs/UnderlineDemo" />
    </TabPanel>
</PreviewAndCode>

### Button brand vertical {{ tocOnly:true }}

<PreviewAndCode title="Button brand vertical">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ButtonBrandVerticalDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="tabs/ButtonBrandVerticalDemo" />
    </TabPanel>
</PreviewAndCode>

### Button gray vertical {{ tocOnly:true }}

<PreviewAndCode title="Button gray vertical">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ButtonGrayVerticalDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="tabs/ButtonGrayVerticalDemo" />
    </TabPanel>
</PreviewAndCode>

### Button border vertical {{ tocOnly:true }}

<PreviewAndCode title="Button border vertical">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ButtonBorderVerticalDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="tabs/ButtonBorderVerticalDemo" />
    </TabPanel>
</PreviewAndCode>

### Button minimal vertical {{ tocOnly:true }}

<PreviewAndCode title="Button minimal vertical">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ButtonMinimalVerticalDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="tabs/ButtonMinimalVerticalDemo" />
    </TabPanel>
</PreviewAndCode>

### Line {{ tocOnly:true }}

<PreviewAndCode title="Line">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.LineDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="tabs/LineDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

<FAQ
    faqs={[
        {
            question: "How do I handle tab selection programmatically?",
            answer: "You can control tab selection using the `selectedKey` and `onSelectionChange` props on the `Tabs` component. This allows you to manage the selected tab state in your application logic and respond to tab changes.",
        },
        {
            question: "Can I add badges to tabs?",
            answer: "Yes, you can add badges to tabs using the `badge` prop on individual `Tabs.Item` components. The badge accepts numbers or strings and automatically adjusts its color based on the tab's selection state.",
        },
        {
            question: "What sizes are available for tabs?",
            answer: "Tabs support two sizes: `\"sm\"` (small) and `\"md\"` (medium). You can set the size using the `size` prop on the `Tabs.List` component. The default size is `\"sm\"`.",
        },
        {
            question: "How do I make tabs take full width?",
            answer: "You can make tabs take the full width of their container by setting the `fullWidth` prop to `true` on the `Tabs.List` component. This distributes the tabs evenly across the available space.",
        },
        {
            question: "Are the tabs accessible?",
            answer: "Yes, the tabs component is built with accessibility in mind using React Aria. It supports keyboard navigation (arrow keys to navigate, Enter/Space to select), proper ARIA attributes, focus management, and screen reader compatibility.",
        },
    ]}
/>