Tabs

<Tabs>TailwindCSS Modules

Tabs organize related content into focused views within the same page. Coloxo UI tabs combine a clear brand underline, flexible labels, controlled or uncontrolled selection, and keyboard navigation powered by Radix UI.

InstallationColoxo CLI

npx coloxo add tabs --style coloxo-css

ES Module ImportPlayground / npm package

import { Tabs } from '@coloxo/ui';

Design Tokens:

--cx-color-fg-brand-primary--cx-color-border-secondary--cx-text-sm--cx-space-3: 12pxfocus: 2px ring + 2px offset

1. State Matrix

The underline identifies the selected view. Inactive tabs remain available, while disabled tabs are skipped during keyboard navigation.

State	Preview	Behavior
Default		The first enabled tab is selected by default.
Selected		Brand text and underline indicate the active tab.
Disabled		Notifications cannot be focused or selected.

2. Content panels

Pair each label with its content. Selecting a tab displays its associated panel without leaving the page.

Uncontrolled tabs

Manage your name, contact details, and public profile.

3. Icons & Badges

Labels accept React nodes, so you can add leading icons or counts while retaining a readable text label.

Leading icons

Notification counts

4. Interactive Props Configurator

Selected tab

Leading icons

Show content

Disable last tab

Visual Render CanvasSELECTED: PROFILE

Manage your name, contact details, and public profile.

tsx

1<Tabs2  value={value}3  onValueChange={setValue}4  items={[5    { value: "profile", label: "Profile", content: "Manage your name, contact details, and public profile." },6    { value: "billing", label: "Billing", content: "Review your subscription, payment methods, and invoices." },7    { value: "notifications", label: "Notifications", content: "Choose which email and in-app notifications you receive." },8  ]}9/>

5. Dark theme

Semantic color tokens adapt the text, underline, borders, and disabled states to dark dashboard surfaces.

Content navigation

Manage your name, contact details, and public profile.

Disabled state

Manage your name, contact details, and public profile.

6. Enterprise layout compositions

Use tabs to group related settings and dashboard views beneath a shared heading.

Workspace settings

Manage your workspace and team preferences.

Coloxo workspace

Your team’s shared space for projects and collaboration.

Project overview

Monitor delivery across your active projects.

Active projects

Completed tasks

148

Accessibility

Keyboard Navigation

Tab moves focus into the tab list. Left and Right arrows move between enabled tabs; Home and End jump to the first and last enabled tabs.

ARIA Relationships

Radix connects each tab to its panel with tablist, tab, and tabpanel roles, selected state, and the associated IDs.

Focus & Disabled States

Keyboard focus uses a visible ring. Disabled tabs cannot be selected and are skipped by arrow-key navigation.

Props

Name	Type	Default	Description
items	TabItem[]	—	Tab definitions: value, label, optional content, and optional disabled state.
value	string	—	Selected tab value when controlled.
defaultValue	string	First enabled item	Initially selected tab when uncontrolled.
onValueChange	(value: string) => void	—	Called when the selected tab changes.
className	string	—	Additional CSS class for the root element.
children	ReactNode	—	Custom content rendered in place of the panels generated from items.