Tabs

Installation

npx shadcn@latest add @blank/tabs

Usage

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

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

Examples

Variants

fill is the default; variant="default" is accepted as an alias of it, so tabs copied from shadcn keep a style. segmented reads as one control; line suits page-level navigation.

Shape

Tabs are pills by default, like every other control. shape="rounded" follows the radius scale instead.

Vertical

API Reference

Tabs

Every Radix Tabs.Root prop: value, defaultValue, onValueChange, orientation, dir, activationMode.

TabsList

Every Radix Tabs.List prop, plus:

TabsTrigger, TabsContent

Radix parts with no props of their own; triggers read size and variant from the list.