Tabs

Tabs split one view into a few peer panels, such as Overview, Activity and Settings, that people view one at a time. Each tab swaps content in place on the same page. Variants cover boxed, pill and underline styles.

Install

bashnpx shadcn@4.18.0 add @siteplane/tabs

Import it from @/siteplane/components/tabs. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

• vs Toggle Group: Pick Toggle Group instead when the choice changes a setting or filter of one view.
• vs Navigation Menu: Pick Navigation Menu or plain links instead when each choice is a separate page with its own URL.
• vs Accordion: Pick Accordion instead when sections stack vertically and people may open several at once.

Rules

• Give every TabsTab a value that matches its TabsPanel, and keep that value in your state when the selection is controlled.
• Set keepMounted on TabsPanel when a hidden panel holds state that must survive switching, or lift that state out.
• Set orientation on Tabs for a vertical list so arrow-key direction matches the layout.
• Choose the look with variant on TabsList, and add divider on an underline list to draw the shared baseline.
• Keep icons decorative and the label as the tab's accessible name.

Reference

• Tabs docs, with every prop, part and example (Markdown)
• Siteplane UI 1.8.1, Navigation. Read the installed source under src/siteplane before relying on an API.