03 / Components

Tabs

Switches between related views without leaving the page. One panel visible at a time.

Demo

Preview

A short overview of the component.

Reference

Orientations

Tabs supports horizontal (default) and vertical orientations. Vertical fits dense side rails or settings panels with many sections.

horizontal

vertical

Guidelines

Usage

Use tabs for parallel views of equivalent content — different ways to look at the same thing.

Don’t

Use tabs as primary site navigation — that belongs in the sidebar or topbar.

Keep tab labels short — one or two words, scannable at a glance.

Don’t

Use tabs for sequential or step-by-step flows — use a Stepper instead.

Show the active tab with a visible indicator (underline, fill, or border).

Don’t

Hide critical content behind a non-default tab without a hint that it exists.

Implementation

Code

1<Tabs.Root defaultValue="overview" className="lex-tabs">
2  <Tabs.List className="lex-tabs__list">
3    <Tabs.Trigger value="overview" className="lex-tabs__trigger">Overview</Tabs.Trigger>
4    <Tabs.Trigger value="usage"    className="lex-tabs__trigger">Usage</Tabs.Trigger>
5    <Tabs.Trigger value="api"      className="lex-tabs__trigger">API</Tabs.Trigger>
6  </Tabs.List>
7  <Tabs.Content value="overview" className="lex-tabs__content">…</Tabs.Content>
8  <Tabs.Content value="usage"    className="lex-tabs__content">…</Tabs.Content>
9  <Tabs.Content value="api"      className="lex-tabs__content">…</Tabs.Content>
10</Tabs.Root>

Reference

Design tokens

Token	Usage
`--color-text`	Active trigger label
`--color-text-2`	Trigger label on hover
`--color-text-muted`	Inactive trigger label
`--color-accent`	Active-trigger underline
`--color-border`	List rule
`--transition-fast`	Colour and underline transitions

A11y

Accessibility

Tabs implements the WAI-ARIA tablist pattern via Radix. The list has role="tablist"; each trigger has role="tab" and aria-selected; each panel has role="tabpanel". Provide an accessible name on the list with aria-labelif there’s no visible heading.

`Tab`	Move focus into the active tab; subsequent Tab leaves the tablist
`←`/`→`	Move selection between triggers (horizontal orientation)
`↑`/`↓`	Move selection between triggers (vertical orientation)
`Home`	Select the first trigger
`End`	Select the last trigger