Tabs
Switch between views of the same thing. Built on Radix Tabs, arrow keys move between tabs.
npx shadcn add @klarhimmel/tabsWhen to use
Use for
Two to five views of the same subject, like Preview and Code.
Not for
Navigation between pages. Use links.
Pairs with
Preview frames, settings panels.
Preview
A summary of the project.
tabs.tsx
import { Theme } from '@/components/klarhimmel/theme/style';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/klarhimmel/ui/tabs';
export default function Example() {
return (
<Theme theme="brand">
<Tabs defaultValue="preview">
<TabsList label="View">
<TabsTrigger value="preview">Preview</TabsTrigger>
<TabsTrigger value="code">Code</TabsTrigger>
</TabsList>
<TabsContent value="preview">…</TabsContent>
<TabsContent value="code">…</TabsContent>
</Tabs>
</Theme>
);
}Install
Import
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/klarhimmel/ui/tabs';- Lands in
- components/klarhimmel/ui/tabs.tsx, plus cn() and the theme item if they are missing. Import theme.css after Tailwind.
- Render in
- Render it inside <Theme>, once near the root of your app. Tokens and fonts are scoped to it, so outside it the component is unstyled.
Anatomy
The parts and how they nest.
A summary of the project.
Tabs
├─ TabsList
│ └─ TabsTrigger (one per view)
└─ TabsContent (one per view)TabsHolds the open value. Controlled or uncontrolled.TabsListThe row of triggers. Takes the accessible name.TabsTriggerOne per view, paired to its content by value.TabsContentThe panel shown for its value.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue / value | string | - | The open tab (Tabs). |
label | string | - | Accessible name of the tab list (TabsList). |
value | string | - | Required on TabsTrigger and TabsContent; pairs them. |
forceMount | true | - | Keep a closed panel in the DOM (TabsContent). |
Accessibility
| Key | Does |
|---|---|
Left / Right | Moves between tabs |
Home / End | First and last tab |
Tab | Moves into the open panel |