Components
Tabs
Switches between views of the same thing without leaving the page.
shadcn/uiNavigation
shadcn/ui docs (opens in a new tab)Radix API (opens in a new tab)components/ui/tabs.tsxPreview
Where the project stands.
Installation
It's already in this Base. In another project, add it with the shadcn CLI, then switch its cn import to @/lib/utils, its icons to @/components/icons, and its text-sm and text-xs to text-ui-s and text-ui-xs.
npx shadcn@latest add tabsExamples
Line
A quieter list for tabs inside a section.
The component as it renders.
Disabled tab
Billing opens once the contract is signed.
Props
The ones that change how it looks or behaves. The rest are the Radix primitive's, in its API.
| Prop | Type | Default |
|---|---|---|
| variant (list) | "default" | "line" | "default" |
| defaultValue | string | – |
| value | string | – |
| onValueChange | (value: string) => void | – |
Guidelines
Use it
- Two to five views of one subject: Preview and Code, Overview and Activity.
Don't
- Use tabs to move between pages: those are links.
- Nest tabs inside tabs.
Used in
The screens in this Base that show it, found in the code.
- Every page under /settings
- Kickoff workshop: founder's view
- Prototypes hub
Accessibility
- Arrow keys move between tabs; Tab moves into the panel.