navigation

Tabs

Switch between views of related content in the same place, like Account and Billing settings.

npx blankui add tabs

Raw markdown for agents Registry JSON

Name

When to use

Two to six views of related content where the user looks at one at a time.

Use something else when

Moving between pages with their own URL. Use links in your navigation.
Steps the user must go through in order. Use a step-by-step form with Buttons.
Picking a value for a form. Use select.

Built on Radix. Arrow keys move between tabs. Use defaultValue, or value with onValueChange to control it.

Import

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

Example

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

Mistakes to avoid

Avoid	Instead
Buttons that set state and show different divs	<Tabs> handles keyboard navigation and ARIA roles
A TabsTrigger without a TabsContent of the same value	One TabsContent per TabsTrigger

Install with the shadcn CLI: npx shadcn add https://blank.vageshwar.dev/r/tabs.json