Switch between views or sections within the same page
The active tab gets an underline and a colour change. Supports optional icons and a full-width mode that stretches tabs to fill the container. Use Segmented Control instead when the options represent filters or modes rather than separate content areas.
Default
With icons
Compact
Full width
With disabled tab
With panels
Tabs draws the tab list and you render the panels. Give a tab a panelId and it points at its panel for assistive technology.
The project at a glance.
What changed, most recent first.
// From the npm package
import { Tabs } from 'rift-ds/components/Tabs/Tabs';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/tabs.json