# Tabs

Tab bar with left/right arrow and tab-key navigation



<ComponentPreview base="ink" name="tabs-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/tabs
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource base="ink" name="tabs" title="components/ui/tabs.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Tabs } from "@/components/ui/tabs";
```

```tsx
<Tabs
  defaultTab="general"
  tabs={[
    {
      key: "general",
      label: "General",
      content: <Text>General settings.</Text>,
    },
    {
      key: "appearance",
      label: "Appearance",
      content: <Text>Theme config.</Text>,
    },
  ]}
/>
```

API Reference [#api-reference]

Tabs [#tabs]

| Prop             | Type                                                                                         | Default    |
| ---------------- | -------------------------------------------------------------------------------------------- | ---------- |
| `tabs`           | `Tab[]`                                                                                      | `required` |
| `defaultTab`     | `string`                                                                                     | -          |
| `activeTab`      | `string`                                                                                     | -          |
| `onTabChange`    | `(key: string) => void`                                                                      | -          |
| `borderColor`    | `string`                                                                                     | -          |
| `borderStyle`    | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"single"` |
| `separator`      | `string`                                                                                     | `" │ "`    |
| `tabBarPaddingX` | `number`                                                                                     | `2`        |
| `paddingX`       | `number`                                                                                     | `1`        |
| `paddingY`       | `number`                                                                                     | `0`        |

Tab [#tab]

| Prop      | Type        | Default    |
| --------- | ----------- | ---------- |
| `key`     | `string`    | `required` |
| `label`   | `string`    | `required` |
| `content` | `ReactNode` | `required` |