Tabs

Preview

Installation

npx shadcn@latest add @cubby-ui/tabs

Usage

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

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

Examples

Controlled

Manage active tab state externally.

Underline Variant

Use underline style for tab indicators.

Vertical Layout

Display tabs in a vertical orientation.

Vertical Underline

Combine vertical layout with underline styling.

Vertical Underline with Sides

Vertical tabs with side-positioned underlines.

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.

Custom Props

TabsList

TabsContent