How to Add a Sidebar to a React App

Before installing Sidebar, 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. The Sidebar also uses lucide-react for its two built-in icons — the ChevronDown on collapsible group headings and the PanelLeft on the collapse button — so make sure that package is installed; it is the same icon set Drivn uses across the library. The one detail worth knowing before you compose it is that the Sidebar is a Client Component: it keeps its collapsed state in React context, so it renders inside a client boundary rather than straight in a Server Component.

Run the CLI from your project root to add the Sidebar source file. The command prompts once for your install directory (defaulting to src/components/ui/) and writes a single sidebar.tsx that holds the root component and all seven compound parts. 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 — rename a part, change the collapsed width, or drop the floating variant, and the changes stick.

Import Sidebar and compose the rail from its dot-notation parts. Sidebar.Header holds your branding, Sidebar.Content is the scrollable middle, Sidebar.Group labels a set of links, and each Sidebar.Item is a nav row that takes an icon (a lucide component reference like Home, not a rendered element), an optional active flag for the current page, and an optional badge for a count. The example below is a minimal dashboard rail — a title, one group, and three items with icons — the same shape the Sidebar docs preview uses. Pass the icon as a component reference (icon={Home}) and the component renders it for you at the right size; the active item picks up the accent background so the current route reads at a glance.

The Sidebar collapses to an icon-only rail, and you drive that either from inside or outside the component. The built-in Sidebar.CollapseButton toggles it with no wiring — drop it in the header and it flips the state through context, animating the width from w-[240px] down to w-[60px] and hiding every item label. To control it from elsewhere — a toggle in your top bar, a keyboard shortcut — pass collapsed and onCollapsedChange and own the boolean in state; the component reads your value instead of its own. When collapsed, each Sidebar.Item drops its label and centers its icon, and group headings hide, so the rail stays usable at 60 pixels wide. The example below owns the state so an outside button and the built-in toggle can both drive it. If you only need a static starting state, pass defaultCollapsed and skip the state entirely.

Two more parts shape a real rail. Sidebar.Group takes a heading and, by default, makes it collapsible — clicking the heading toggles the group's items open and closed with a grid-template-rows animation, and defaultOpen={false} starts it closed. Sidebar.Separator draws a rule between groups. Set variant="floating" on the root for a rounded, shadowed rail that sits inset from the edge, or side="right" to anchor it on the opposite side. Everything visible is a Tailwind class in the styles object inside the file you own, so restyling is a local edit: change width.collapsed to make the rail wider when closed, swap the itemActive background for a branded accent, or adjust the header border. Because those classes read your theme tokens, the rail matches dark and light mode with no override. For copy-paste layouts covering groups, badges, and the floating variant see the Sidebar examples.