Browse components

Line TabsFree

Underlined tabs for compact content sections.

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.

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.