Tabs

A set of layered sections of content that display one panel at a time.

Installation

bash

npx @smicolon/cli add tabs

Run init once per project before adding components. See Installation.

Preview

Account

Make changes to your account here.

With Disabled Tab

You have two orders out for delivery.

Props

Prop	Type	Default	Description
`value`	`string`	—	Active tab, when controlled.
`defaultValue`	`string`	—	Tab active at first.
`onValueChange`	`(value) => void`	—	Called when the active tab changes.
`TabsTrigger`	`{ value, disabled }`	—	A tab button; its `value` names its panel.
`TabsContent`	`{ value }`	—	The panel shown for its `value`.
`className`	`string`	—	Extra classes for the part.

Usage

tsx

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

// Basic tabs
<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    Account content here.
  </TabsContent>
  <TabsContent value="password">
    Password content here.
  </TabsContent>
</Tabs>

// Controlled tabs
const [value, setValue] = useState("account")

<Tabs value={value} onValueChange={setValue}>
  ...
</Tabs>