Browse components

Overview Tabs

Default tabs for switching between related dashboard content.

Add to your project

1Connect the Uniquel MCP

Connect Uniquel to your coding agent before using the component ID.

Connect MCP

2Copy the component ID

MCP ID
component:tabs/overview-tabs

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

Your team activity appears here.

Line Tabs

Underlined tabs for compact content sections.

Manage your account profile.

Vertical Tabs

Side navigation tabs for account settings and preferences.

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.