Tabs

Layered sections of content displayed one at a time. Writing direction is passed to Radix so keyboard arrows flip in RTL; vertical line tabs place the active indicator on the inline-end edge.

Basic

Switch between layered panels with a horizontal tab list.

Installation

CLI

npx @sonojs/ui@latest add tabs

Composition

structure

Tabs
├── TabsList
│   ├── TabsTrigger
│   └── TabsTrigger
├── TabsContent
└── TabsContent

Usage

tabs.tsx

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function Example() {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">Make changes to your account here.</TabsContent>
      <TabsContent value="password">Change your password here.</TabsContent>
    </Tabs>
  )
}

Direction

Toggle LTR/RTL in the preview — horizontal tabs reverse order with the writing direction, and vertical line indicators stay on the content side via after:-end-1.

direction.tsx

import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"

// dir from useDirection — arrow keys and tab order follow LTR/RTL.
// Vertical line indicator: after:-end-1 (inline end toward content).
<Tabs orientation="vertical" defaultValue="account">
  <TabsList variant="line">
    <TabsTrigger value="account">Account</TabsTrigger>
  </TabsList>
</Tabs>

Props

Prop	Type	Default	Description
defaultValue	string	—	On `Tabs` — initially selected tab value.
value	string	—	On `Tabs` — controlled selected value.
orientation	"horizontal" · "vertical"	"horizontal"	Layout of the tab list.
variant	"default" · "line"	"default"	On `TabsList` — pill vs underline style.
dir	"ltr" · "rtl"	inherited	Writing direction. Defaults from `useDirection` / `<html dir>`.
disabled	boolean	false	On `TabsTrigger` — disable a tab.