Tabs

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

Installation

tsx

npx @smicolon/smi-ui add tabs

Preview

Account

Make changes to your account here.

With Disabled Tab

Content for the first tab.

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>