Browse components

Vertical TabsFree

Side navigation tabs for account settings and preferences.

Add to your project

Checking access...

Works with your AI tools

ClaudeClaude*
CodexCodex*
LovableLovable
Base44Base44
Figma MakeFigma Make
ReplitReplit*
CursorCursor*
v0v0

* Compatible with most projects that use the default React/Next.js framework.

Built With

ReactTailwind CSSBase UI

Props

PropTypeDescription
defaultValuestringInitially selected tab value.
valuestringControlled selected tab value.
onValueChange(value: string) => voidFired when selection changes.
orientation'horizontal' | 'vertical'Tab layout direction.
variant'default' | 'line'TabsList visual style.

More Tabs Components

View your key metrics and recent project activity.

Overview Tabs

Default tabs for switching between related dashboard content.

Your team activity appears here.

Line Tabs

Underlined tabs for compact content sections.

Billing remains unavailable until your workspace is verified.

Disabled Tabs

Tabs with an unavailable option.

Your workspace dashboard.

Icon Tabs

Tabs with Solar icons alongside short labels.