labsUI

Tabs

WAI-ARIA tabs with arrow, Home and End keys. One indicator springs between tabs, segmented or underline. Inactive panels stay in the DOM for SEO; the active one fades in.

npx @kznlabs/labsui add tabs

Members

12,840

Commands

48,290

Clips

1,312
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";export function SettingsTabs() {  return (    <Tabs defaultValue="account" variant="underline">      <TabsList aria-label="Settings">        <TabsTrigger value="account">Account</TabsTrigger>        <TabsTrigger value="password">Password</TabsTrigger>      </TabsList>      <TabsContent value="account">Account settings</TabsContent>      <TabsContent value="password">Password settings</TabsContent>    </Tabs>  );}

<Tabs>

WAI-ARIA tabs. Controlled (value + onValueChange) or uncontrolled (defaultValue).

  • defaultValuedefault ""
    string

    Tab at first render (uncontrolled).

  • onValueChange
    (value: string) => void

    Called with the activated tab's value.

  • value
    string

    Controlled tab; pair with onValueChange.

  • variantdefault "segmented"
    "segmented" | "underline"

    "segmented": pill in a muted track. "underline": bar under the active tab.

PropTypeDefault
defaultValue

Tab at first render (uncontrolled).

string""
onValueChange

Called with the activated tab's value.

(value: string) => void—
value

Controlled tab; pair with onValueChange.

string—
variant

"segmented": pill in a muted track. "underline": bar under the active tab.

"segmented" | "underline""segmented"

Also accepts every <div> prop.

<TabsList>

One indicator springs to the active tab, always behind the labels. Arrows, Home and End move focus.

Also accepts every <div> prop (none of its own).

<TabsTrigger>

  • value*
    string

    Matches a TabsContent value.

PropTypeDefault
value*

Matches a TabsContent value.

string—

Also accepts every <button> prop.

<TabsContent>

Inactive panels stay in the DOM (hidden) so their content remains crawlable.

  • children*
    ReactNode

    Panel content; stays in the HTML while hidden.

  • value*
    string

    Matches a TabsTrigger value.

PropTypeDefault
children*

Panel content; stays in the HTML while hidden.

ReactNode—
value*

Matches a TabsTrigger value.

string—

* required. Every component also takes className.