Component

Tabs

A set of layered sections of content with Neo-Brutalism styling. Built on Radix UI Tabs primitive.

Preview

Manage your account settings and preferences here.

Installation

pnpm dlx brutx@latest add tabs

Usage

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

<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">
    Content for tab 1
  </TabsContent>
  <TabsContent value="tab2">
    Content for tab 2
  </TabsContent>
</Tabs>

Examples

Controlled Tabs

Control tab state with value and onValueChange.

Account settings panel

With Disabled Tab

Use disabled prop to disable specific tabs.

Project overview and summary.

With Form Content

Tabs containing form inputs.

Display Name

Username

Full Width Tabs

Make tabs stretch to fill the container width.

Content for the first tab.

API Reference

Tabs

Root component that manages tab state.

Prop	Type	Default	Description
defaultValue	string	-	Initial active tab (uncontrolled)
value	string	-	Controlled active tab value
onValueChange	(value: string) => void	-	Callback when tab changes
orientation	"horizontal" \| "vertical"	"horizontal"	Tab orientation

TabsTrigger

Individual tab button.

Prop	Type	Default	Description
value	string	required	Unique identifier for the tab
disabled	boolean	false	Disable this tab

TabsContent

Content panel for a tab.

Prop	Type	Default	Description
value	string	required	Must match a TabsTrigger value
forceMount	boolean	false	Keep content mounted even when inactive

All Exports

Component	Description
Tabs	Root container
TabsList	Container for tab triggers
TabsTrigger	Individual tab button
TabsContent	Tab content panel

Accessibility

Tab moves focus to the active tab
← → navigate between tabs (horizontal)
↑ ↓ navigate between tabs (vertical)
Home / End move to first/last tab
Enter / Space activates focused tab