# Tabs: Right to left

> Tabs, arrow keys and the indicator follow the reading direction.

Example: https://hextaui.com/docs/tabs/examples/rtl
Component docs: https://hextaui.com/docs/tabs.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/tabs-rtl.json
```

This adds `components/examples/tabs/rtl.tsx` with the Tabs component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/tabs/rtl.tsx"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function TabsRtl() {
  return (
    <div dir="rtl" className="w-full max-w-sm">
      <Tabs defaultValue="account">
        <TabsList variant="line">
          <TabsTrigger value="account">الحساب</TabsTrigger>
          <TabsTrigger value="password">كلمة المرور</TabsTrigger>
          <TabsTrigger value="alerts">التنبيهات</TabsTrigger>
        </TabsList>
        <TabsContent value="account">
          <p className="py-2 text-sm text-muted-foreground">إعدادات الحساب.</p>
        </TabsContent>
        <TabsContent value="password">
          <p className="py-2 text-sm text-muted-foreground">
            غيّر كلمة المرور.
          </p>
        </TabsContent>
        <TabsContent value="alerts">
          <p className="py-2 text-sm text-muted-foreground">إدارة التنبيهات.</p>
        </TabsContent>
      </Tabs>
    </div>
  )
}
```

## Props in this example

### Tabs

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultValue` | `any` | `0` |  |

### TabsList

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "line"` | `"default"` |  |

### TabsTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `any` | – |  |

### TabsContent

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `any` | – |  |

## More Tabs examples

- [Underline](https://hextaui.com/docs/tabs/examples/line.md)
- [Many tabs](https://hextaui.com/docs/tabs/examples/overflow.md)
- [Many tabs, segmented](https://hextaui.com/docs/tabs/examples/overflow-segmented.md)
- [Icons and counts](https://hextaui.com/docs/tabs/examples/icons.md)
- [Vertical](https://hextaui.com/docs/tabs/examples/vertical.md)
- [Disabled](https://hextaui.com/docs/tabs/examples/disabled.md)
- [Controlled](https://hextaui.com/docs/tabs/examples/controlled.md)