Tabs

A set of layered sections of content.

Installation

Install this component via the shadcn CLI.

npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/tabs.json

Or install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json

Preview

Interactive component demo.

Default Variant

Account

Make changes to your account here.

Line Variant

Overview content goes here.

Vertical Orientation

General settings content.

Usage

How to use this component in your code.

{/* Default variant */}
<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Content 1</TabsContent>
</Tabs>

{/* Line variant */}
<TabsList variant="line">...</TabsList>

{/* Vertical orientation */}
<Tabs orientation="vertical">...</Tabs>

{/* Disabled trigger */}
<TabsTrigger disabled>Disabled</TabsTrigger>