How to Add Tabs to a React App

Before installing Tabs, confirm your React project has the two things Drivn assumes: Tailwind CSS v4 installed and processing your styles, and a @/ path alias pointing at your source directory — the component ships as a .tsx file, so TypeScript is part of the stack. If you scaffolded with create-next-app, npm create vite, or npx drivn@latest create, both are already wired; for a custom setup the installation page lists the minimal config. Tabs has no third-party import past React and the local cn utility — there is no animation or headless library to add. The one detail worth knowing before you render it is that Tabs is a Client Component: it holds the active value in React.useState and shares it through a React context, so its source opens with a 'use client' directive. You can still import Tabs into a Server Component page directly, but any wrapper that reads or sets the active tab with your own state must itself be a client component.

Run the CLI from your project root to add the Tabs source file. The command prompts once for your install directory (defaulting to src/components/ui/) and writes a single tabs.tsx — no other files, because the component's only dependency past React is the cn utility. No global config file is created; the result is TypeScript source you edit like any other component. Confirm it landed in your editor, then commit it for a clean baseline. If your project uses a monorepo layout or a non-standard source path, the CLI docs cover the flags for targeting a custom location during install. Because the file is yours after install, future Drivn releases will not overwrite your edits — the whole component, from the context provider to the three sub-components and the styling object, is one file you can read top to bottom.

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 write a click handler yourself. Because Tabs is uncontrolled here, it tracks the active tab internally from defaultValue, which is the right default for most UI: a settings panel, a docs section toggle, a product tab strip. Tabs itself is a Client Component, so you can import it straight into a Server Component page like the one below and only the Tabs part hydrates. The default variant renders the list as a rounded bg-accent track, with the active tab swapping in bg-background text-foreground.

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; onChange fires with the next tab's string value, so wiring it to the setter is a one-liner. Because this wrapper owns state, it must start with 'use client'. Reach for this when a Button elsewhere on the page jumps the user to a specific tab, or when the active tab must survive navigation by living in the URL.

Tabs ships three built-in looks through a single variant prop on the root: default, underline, and compact. The default variant is the rounded bg-accent pill track from Step 2; underline drops the track for plain text triggers with an underline underline-offset-8 on the active tab — the toolbar look for a docs page; and compact renders small text-xs triggers with a bg-muted active state for dense toolbars. Each variant is a key in the variantStyles object inside the file you own, so the switch is a prop, not a re-implementation, and you can add a fourth variant by adding a key. Pair any of them with a Card to give the panels a bordered surface, and recolor the active and hover tokens in Theming. The example below renders the underline style for a preview-and-code toggle.