Tabs

Tabs split related content into panels and show one at a time behind a row of triggers. Use them to organize a settings screen, a card's detail views, or any section where the panels are peers and only one is relevant at once.

Preview

Installation

npx shadcn@latest add @cubby-ui/tabs

Usage

import {
  Tabs,
  TabsContent,
  TabsList,
  TabsPanels,
  TabsTrigger,
} from "@/components/ui/cubby-ui/tabs";

<Tabs>
  <TabsList>
    <TabsTrigger />
  </TabsList>
  <TabsPanels>
    <TabsContent />
  </TabsPanels>
</Tabs>

Composition

Tabs
├── TabsList
│   └── TabsTrigger
└── TabsPanels
    └── TabsContent

Wrap all TabsContent panels in TabsPanels to get the shared grid layout and directional slide transitions. TabsList renders the active indicator internally.

Examples

Sizes

Use size on TabsList to switch between small and medium; the list and indicator corner radius scale with it.

Controlled

Use value and onValueChange on Tabs to drive the active tab yourself.

Underline Variant

Set variant="underline" on TabsList for an underline indicator instead of the capsule.

Vertical Layout

Set orientation="vertical" on Tabs to stack triggers down the side.

Vertical Underline

Combine orientation="vertical" with variant="underline" for a side rail.

Vertical Underline with Sides

Use side on TabsList to place the underline on the left or right edge.

Animated

TabsPanels slides and fades between panels in the direction of the move.

API Reference

The Tabs component is built on top of Base UI's Tabs. All Base UI props are supported. The documentation below only covers custom props and modified defaults specific to our implementation.

For the complete Base UI API, see the Base UI Tabs documentation.

Props

TabsList

Container for tab triggers with visual styling. Wraps Base UI's Tabs.List.

TabsPanels

Grid container for tab panels. Wrap all TabsContent items in TabsPanels to enable proper layout and smooth directional slide and fade transitions between panels.

TabsContent

Panel that displays content for the active tab. Wraps Base UI's Tabs.Panel.