Tabs
Client-side tabs over content already in the page. For tabs that should be linkable and crawlable, route them in the URL instead — the store page does exactly that, with a path segment rather than a query param, and the reason is below.
import Tabs from '@/components/ui/Tabs';Source: src/components/ui/Tabs.tsx
Examples
Switching panels
Terms, exclusions, tracking notes.
128 reviews, 4.5 average.
3 active offers.
Props
<Tabs> props
| Prop | Type | Default | Description |
|---|---|---|---|
tabsrequired | TabItem[] | — | — |
defaultTab | string | — | — |
size | TextSize | 'md' | Label size in Text's tokens (sm 14 / md 16 / lg 20 px). Default: body size. |
Accessibility
- Arrow keys move between tabs and only the selected tab is in the tab order — the standard tablist pattern.
- Each panel is associated with its tab, so a screen reader announces which one it is in.
Usage
Do
- Use it when all panels are cheap and already loaded.
- Keep labels to one or two words — tabs must fit one line on a phone.
Don’t
- Don’t use it for content that should have its own URL. A tab someone can’t link to is content someone can’t share, and a crawler never sees the panels that start closed — which is why the store page routes its tabs in the path and not this.
- Don’t hide a form in a closed tab; validation errors in an invisible panel are invisible too.