React Tabs Component Examples

The starting point is a Tabs root with a defaultValue, a Tabs.List of Tabs.Tab triggers, and one Tabs.Panel per tab. Each Tabs.Tab carries a value, and the panel with the matching value is the one that renders — the active value lives in context, so you never wire click handlers yourself. The list renders as a rounded bg-accent track, and the active tab swaps in bg-background text-foreground while the rest stay muted.

Because Tabs is uncontrolled here, it tracks the active tab internally from defaultValue="overview". This is the right default for most UI — a settings panel, a docs section toggle, a product tab strip — where the component owns its own state and you only care about what is shown. Drop it into any client page and it works with no extra state management; see the full prop list on the Tabs reference.

When you need to read or set the active tab from outside — syncing it to a URL query param, a parent reducer, or a multi-step form — switch to controlled mode by passing value and onChange. The Drivn source reads const value = controlled ?? uncontrolled, so the moment you pass a value prop it takes over and your onChange becomes the single source of truth. Hold the active tab in React.useState in the parent and feed it back in.

This is the pattern to reach for when a Button elsewhere on the page needs to jump the user to a specific tab, or when the active tab must survive a navigation by living in the URL. The wrapper is marked 'use client' for the useState, and setTab is passed straight to onChange because both share the (value: string) => void signature.

Each Tabs.Tab accepts children and a className, and it spreads any remaining <button> attributes onto the rendered element — so adding a leading icon is just dropping a lucide-react icon component beside the label. The tab's base styles set padding and font but no flex layout, so pass className="flex items-center gap-2" on the Tab to line the icon up with the text; cn() merges it with the component's own classes.

This keeps the icon-as-component convention consistent with the rest of Drivn — you render <User className="size-4" /> as a child rather than threading an icon prop. The active and inactive color tokens still apply, so the icon inherits the same text-foreground / text-muted-foreground treatment as the label when the tab's state changes.

A useful property of the Drivn Tabs is that Tabs.Panel returns null when its value does not match the active tab — inactive panels are unmounted, not hidden with CSS. That means anything inside an inactive panel never renders, so its useEffect hooks, data fetches, and expensive children do not run until the user actually opens that tab. You get lazy mounting for free, with no Suspense boundary or conditional of your own.

This is the pattern for a tab that holds a heavy chart, a map, or a list that fetches on mount. Put the costly component inside the panel — optionally wrapped in a Card — and it stays dormant until selected; switch away and it unmounts again. For a tab that should keep its state across switches, lift that state into the parent instead, since the panel itself is torn down each time it goes inactive.