Tabs
Switches between panels of related content.
- Navigation
- 1 file
- 2 npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add tabsnpm packages installed: class-variance-authority, radix-ui.
import { Tabs } from "@/components/ui/tabs";Default
Underline
With Disabled Tab
Manual Activation
Smooth Tabs
<TabsList>
| Prop | Type | Default |
|---|---|---|
indicator | "none" | "slide" | "none" |
variant | "solid" | "underline" | "solid" |
Every prop of Radix UI’s Tabs.List, plus className.
<TabsTrigger>
| Prop | Type | Default |
|---|---|---|
variant | "solid" | "underline" | "solid" |
Every prop of Radix UI’s Tabs.Trigger, plus className.
<TabsContent>
Every prop of Radix UI’s Tabs.Content, plus className.
Implements the ARIA tabs pattern: arrows move between tabs, Home/End jump to the ends, and only the active tab is in the tab sequence. Panels are focusable so keyboard users reach their content directly. Use activationMode="manual" when showing a panel is expensive, so arrowing past it does not load it. The optional sliding indicator (indicator="slide") is aria-hidden decoration; selection is still conveyed by aria-selected, and the slide stops under reduced motion.
10/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes