# Tabs

Organize content into underlined horizontal or vertical tabs.

## Install

```sh
npx shadcn@4.21.0 add lr-run/dir-ui/tabs#v0.1.3
```

[Registry item with source and dependencies](https://github.com/lr-run/dir-ui/blob/v0.1.3/registry.json)

Requires React 19, Tailwind CSS 4 and shadcn initialized with Base UI. Registry target placeholders resolve through components.json: @ui, @components, @hooks and @lib. Imports below use the conventional @/ prefix for illustration; the CLI rewrites them to your configured aliases. Shared components are installed once through registryDependencies. The installer merges shared theme rules into the stylesheet configured in components.json. Existing files are never forcibly overwritten; review CLI conflicts before accepting changes. No Dir runtime is required.

## Tabs, TabsList, TabsTrigger, TabsContent

```tsx
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs.tsx'
```

| Prop | Type | Default / required | Notes |
| --- | --- | --- | --- |
| Tabs.value / defaultValue | TabsPrimitive.Root.Props["value"] | — | Use value for controlled state or defaultValue for an initial selection. |
| Tabs.onValueChange | (value, eventDetails) => void | — | Called when the selected value changes. |
| Tabs.orientation | "horizontal" \| "vertical" | "horizontal" | Controls layout and arrow-key navigation direction. |
| TabsList.activateOnFocus | boolean | false | When false, press Enter or Space to activate a focused tab. |
| TabsList.aria-label | string | — | Accessible name of the tab list. |
| TabsTrigger.value | TabsPrimitive.Tab.Props["value"] | Required | Must match the associated TabsContent value. |
| TabsTrigger.disabled | boolean | false | Disables selection and interaction. |
| TabsContent.value | TabsPrimitive.Panel.Props["value"] | Required | Value of the associated tab. |
| TabsContent.keepMounted | boolean | false | Keeps hidden content mounted to preserve local input state. |
| children / className | ReactNode / string | — | Content and additional styles for each part. |

```ts
import type { ComponentProps } from 'react'

type TabsProps = ComponentProps<typeof Tabs>
type TabsListProps = ComponentProps<typeof TabsList>
type TabsTriggerProps = ComponentProps<typeof TabsTrigger>
type TabsContentProps = ComponentProps<typeof TabsContent>
```

Tabs use the line appearance. Each part inherits the corresponding Base UI Tabs props.