Tabs

Make changes to your account here.

Installation

pnpm dlx stera-ui add tabs

Usage

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

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

Line Variant

Make changes to your account here.

Vertical

Make changes to your account here.

Disabled

Make changes to your account here.

Sizes

Small tabs (default).

Medium tabs.

Large tabs.

Size	Description
`sm`	Small (default)
`md`	Medium
`lg`	Large

With Icons

Browse your music library.

API Reference

Prop	Type	Default
`defaultValue`	`string`	—
`value`	`string`	—
`onValueChange`	`(value: string) => void`	—
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`

TabsList

Prop	Type	Default
`variant`	`"default" \| "line"`	`"default"`
`size`	`"sm" \| "md" \| "lg"`	`"sm"`

TabsTrigger

Prop	Type	Default
`value`	`string`	—
`disabled`	`boolean`	`false`