ContextQMD
Back to Shadcn Ui

Tabs

apps/v4/content/docs/components/base/tabs.mdx

latest1.9 KB
Original Source

<ComponentPreview styleName="base-nova" name="tabs-demo" previewClassName="h-96" />

Installation

<CodeTabs> <TabsList> <TabsTrigger value="cli">Command</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">
bash
npx shadcn@latest add tabs
</TabsContent> <TabsContent value="manual"> <Steps className="mb-0 pt-2">

<Step>Install the following dependencies:</Step>

bash
npm install @base-ui/react

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="tabs" title="components/ui/tabs.tsx" styleName="base-nova" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </CodeTabs>

Usage

tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
tsx
<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>

Examples

Line

Use the variant="line" prop on TabsList for a line style.

<ComponentPreview styleName="base-nova" name="tabs-line" />

Vertical

Use orientation="vertical" for vertical tabs.

<ComponentPreview styleName="base-nova" name="tabs-vertical" />

Disabled

<ComponentPreview styleName="base-nova" name="tabs-disabled" />

Icons

<ComponentPreview styleName="base-nova" name="tabs-icons" />

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

<ComponentPreview styleName="base-nova" name="tabs-rtl" direction="rtl" />

API Reference

See the Base UI Tabs documentation.