Tabs — dir/ui

Organize content into underlined horizontal or vertical tabs.

# Tabs

Organize content into underlined horizontal or vertical tabs.

## Install

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

[Registry item with source and dependencies](https://github.com/lr-run/dir-ui/blob/v0.1.2/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. Theme CSS is imported by the UI modules. 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.