> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tabs

> A tabs component for organizing content into multiple panels

export const TabsWithIconsPreview = () => {
  return <iframe src="https://kerny-custom.vercel.app/preview/TabsWithIconsExample" frameBorder="0" width="100%" height="340"></iframe>;
};

export const TabsVerticalPreview = () => {
  return <iframe src="https://kerny-custom.vercel.app/preview/TabsVerticalExample" frameBorder="0" width="100%" height="360"></iframe>;
};

export const TabsUserProfilePreview = () => {
  return <iframe src="https://kerny-custom.vercel.app/preview/TabsUserProfileExample" frameBorder="0" width="100%" height="520"></iframe>;
};

export const TabsDashboardPreview = () => {
  return <iframe src="https://kerny-custom.vercel.app/preview/TabsDashboardExample" frameBorder="0" width="100%" height="480"></iframe>;
};

export const TabsBasicPreview = () => {
  return <iframe src="https://kerny-custom.vercel.app/preview/TabsBasicExample" frameBorder="0" width="100%" height="320"></iframe>;
};

## Overview

The Tabs component provides a tabbed interface for organizing content into multiple panels.

## Basic Usage

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Tabs, TabsList, TabsTrigger, TabsContent } from '@peppermint-design/devreadykit-custom';

    export default function App() {
      return (
        <Tabs defaultValue="tab1">
          <TabsList>
            <TabsTrigger value="tab1">Tab 1</TabsTrigger>
            <TabsTrigger value="tab2">Tab 2</TabsTrigger>
            <TabsTrigger value="tab3">Tab 3</TabsTrigger>
          </TabsList>
          
          <TabsContent value="tab1">
            <p>Content for tab 1</p>
          </TabsContent>
          
          <TabsContent value="tab2">
            <p>Content for tab 2</p>
          </TabsContent>
          
          <TabsContent value="tab3">
            <p>Content for tab 3</p>
          </TabsContent>
        </Tabs>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <TabsBasicPreview />
  </Tab>
</Tabs>

## With Icons

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Tabs, TabsList, TabsTrigger, TabsContent } from '@peppermint-design/devreadykit-custom';
    import { User } from '@/assets/icons/user';
    import { Edit } from '@/assets/icons/edit';
    import { Users } from "@/assets/icons/users.tsx";

    export default function TabsWithIcons() {
      return (
        <Tabs defaultValue="profile">
          <TabsList>
            <TabsTrigger value="profile">
              <span className="flex items-center gap-2">
                <User className="h-4 w-4" />
                Profile
              </span>
            </TabsTrigger>
            <TabsTrigger value="settings">
              <span className="flex items-center gap-2">
                <Edit className="h-4 w-4 text-neutral-40" />
                Settings
              </span>
            </TabsTrigger>
            <TabsTrigger value="help">
              <span className="flex items-center gap-2">
                <Users className="h-4 w-4 text-neutral-40" />
                Help
              </span>
            </TabsTrigger>
          </TabsList>
          
          <TabsContent value="profile">
            <div className="p-4">Profile content</div>
          </TabsContent>
          
          <TabsContent value="settings">
            <div className="p-4">Settings content</div>
          </TabsContent>
          
          <TabsContent value="help">
            <div className="p-4">Help content</div>
          </TabsContent>
        </Tabs>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <TabsWithIconsPreview />
  </Tab>
</Tabs>

## Vertical Tabs

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Tabs, TabsList, TabsTrigger, TabsContent } from '@peppermint-design/devreadykit-custom';

    export default function VerticalTabs() {
      return (
        <Tabs defaultValue="overview" orientation="vertical">
          <div className="flex gap-4">
            <TabsList className="flex-col">
              <TabsTrigger value="overview">Overview</TabsTrigger>
              <TabsTrigger value="details">Details</TabsTrigger>
              <TabsTrigger value="history">History</TabsTrigger>
            </TabsList>
            
            <div className="flex-1">
              <TabsContent value="overview">
                <div className="p-4">Overview content</div>
              </TabsContent>
              
              <TabsContent value="details">
                <div className="p-4">Details content</div>
              </TabsContent>
              
              <TabsContent value="history">
                <div className="p-4">History content</div>
              </TabsContent>
            </div>
          </div>
        </Tabs>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <TabsVerticalPreview />
  </Tab>
</Tabs>

## Props

| Component   | Prop          | Type                         | Default        | Description            |
| :---------- | :------------ | :--------------------------- | :------------- | :--------------------- |
| Tabs        | defaultValue  | `string`                     | —              | Default active tab     |
| Tabs        | value         | `string`                     | —              | Controlled active tab  |
| Tabs        | onValueChange | `(value: string) => void`    | —              | Tab change handler     |
| Tabs        | orientation   | `"horizontal" \| "vertical"` | `"horizontal"` | Tab orientation        |
| Tabs        | children      | `React.ReactNode`            | —              | Tab content            |
| TabsList    | children      | `React.ReactNode`            | —              | Tab triggers           |
| TabsList    | className     | `string`                     | —              | Additional CSS classes |
| TabsTrigger | value         | `string`                     | —              | Tab value              |
| TabsTrigger | children      | `React.ReactNode`            | —              | Tab label              |
| TabsTrigger | disabled      | `boolean`                    | `false`        | Disabled state         |
| TabsTrigger | className     | `string`                     | —              | Additional CSS classes |
| TabsContent | value         | `string`                     | —              | Content value          |
| TabsContent | children      | `React.ReactNode`            | —              | Tab content            |
| TabsContent | className     | `string`                     | —              | Additional CSS classes |

## Examples

### User Profile Tabs

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { useState } from "react";
    import { Tabs, TabsList, TabsTrigger, TabsContent, Toggle } from '@peppermint-design/devreadykit-custom';

    export default function UserProfileTabs() {
      const user = {
        name: "Jane Doe",
        email: "jane.doe@example.com",
        activity: [
          { id: 1, description: "Signed in from Chrome on macOS" },
          { id: 2, description: "Updated profile information" },
          { id: 3, description: "Enabled two-factor authentication" },
        ],
      };
      const [emailNotifications, setEmailNotifications] = useState(true);
      const [darkMode, setDarkMode] = useState(false);

      return (
        <Tabs defaultValue="profile">
          <TabsList>
            <TabsTrigger value="profile">Profile</TabsTrigger>
            <TabsTrigger value="activity">Activity</TabsTrigger>
            <TabsTrigger value="settings">Settings</TabsTrigger>
          </TabsList>
          
          <TabsContent value="profile">
            <div className="p-6 space-y-4">
              <h3 className="text-lg font-semibold">Profile Information</h3>
              <div>
                <label className="block text-sm font-medium">Name</label>
                <p>{user.name}</p>
              </div>
              <div>
                <label className="block text-sm font-medium">Email</label>
                <p>{user.email}</p>
              </div>
            </div>
          </TabsContent>
          
          <TabsContent value="activity">
            <div className="p-6">
              <h3 className="text-lg font-semibold mb-4">Recent Activity</h3>
              <div className="space-y-2">
                {user.activity.map(activity => (
                  <div key={activity.id} className="p-2 border rounded">
                    {activity.description}
                  </div>
                ))}
              </div>
            </div>
          </TabsContent>
          
          <TabsContent value="settings">
            <div className="p-6">
              <h3 className="text-lg font-semibold mb-4">Account Settings</h3>
              <div className="space-y-4">
                <Toggle
                  label="Email notifications"
                  checked={emailNotifications}
                  onChange={setEmailNotifications}
                />
                <Toggle
                  label="Dark mode"
                  checked={darkMode}
                  onChange={setDarkMode}
                />
              </div>
            </div>
          </TabsContent>
        </Tabs>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <TabsUserProfilePreview />
  </Tab>
</Tabs>