Tabs

Installation#

npmpnpmyarnbun

npx sugarcoat add tabs

Examples#

Default#

Default

Sizes#

Available in three sizes to fit different UI contexts.

Sizes

Colors#

Tabs support different color schemes.

Colors

Tab Styles#

Choose between underline (default) and pills style.

Default Style (Underline)

Pills Style

Pills with Colors#

Pills Colors

Vertical Orientation#

Vertical

Disabled Tab#

Disabled

Controlled Tabs#

Controlled

With Icons#

With Icons

Anatomy#

<Tabs defaultValue="tab1">
  <Tabs.List>
    <Tabs.Tab value="tab1">Tab 1</Tabs.Tab>
    <Tabs.Tab value="tab2">Tab 2</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value="tab1">Content 1</Tabs.Panel>
  <Tabs.Panel value="tab2">Content 2</Tabs.Panel>
</Tabs>

Usage#

Import

import { Tabs } from "@sugarcoat/ui-nxt";

Usage

<Tabs defaultValue="tab1" tabStyle="default" color="primary">
<Tabs.List>
  <Tabs.Tab value="tab1">First Tab</Tabs.Tab>
  <Tabs.Tab value="tab2">Second Tab</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="tab1">First content</Tabs.Panel>
<Tabs.Panel value="tab2">Second content</Tabs.Panel>
</Tabs>

Props#

Tabs (Root)#

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg"	"md"	Size of the tab triggers
color	"default" \| "primary" \| "accent"	"default"	Color scheme for the tabs
tabStyle	"default" \| "pills"	"default"	Visual style of the tabs (underline or pills)
orientation	"horizontal" \| "vertical"	"horizontal"	Layout orientation of the tabs
value	string	-	Controlled active tab value
defaultValue	string	-	Initial active tab value (uncontrolled)
onValueChange	(value: string) => void	-	Callback when active tab changes

Tabs.Tab#

Prop	Type	Default	Description
valuerequired	string	-	Unique identifier for the tab
disabled	boolean	-	Whether the tab is disabled

Tabs.Panel#

Prop	Type	Default	Description
valuerequired	string	-	Must match a Tab value to associate content

Accessibility#

Built on Base UI Tabs for robust accessibility
Supports keyboard navigation (Arrow keys to move, Enter/Space to select)
Proper ARIA roles and attributes for tablist pattern
Focus management between tab triggers
Panel content is properly associated with its tab trigger