How to Add a Command Menu to a React App

Before installing the Command menu, confirm your React project has the three things Drivn assumes: Tailwind CSS v4 installed and processing your CSS, TypeScript configured (the component ships as a .tsx file), and a @/ path alias pointing at your source directory. If you scaffolded with create-next-app, npm create vite, or npx drivn@latest create, all three are already wired. For a custom setup, check the compilerOptions.paths entry in tsconfig.json; the installation page lists the minimal config. The Command pulls in cmdk for the search and keyboard logic and lucide-react for the input search icon. It also composes the Drivn Dialog for its Command.Dialog palette variant, so the CLI installs that file alongside it.

Run the CLI from your project root to add the Command source file. The command prompts once for your install directory (defaulting to src/components/ui/), writes command.tsx, and adds cmdk and lucide-react to your package.json if they are not already present. Because Command.Dialog imports the Drivn Dialog, the CLI resolves that internal dependency and installs dialog.tsx too. No global config file is created — the Command is a TypeScript file in your repo that you edit like any other component. Confirm the file landed in your editor, then commit it. If your project uses a monorepo layout or a non-standard path, the CLI docs cover the flags for targeting a custom location during install.

Import the Command from your UI directory and compose the menu from its sub-components. Command.Input renders the search field with a lucide-react Search icon; Command.List is the scrollable results region (a fixed h-[300px] by default); Command.Empty shows when nothing matches; Command.Group labels a section via its heading prop; and Command.Item is each row. cmdk filters the items against the input value as the user types and tracks the highlighted row with data-[selected=true], so arrow-key navigation works without any state of your own. Because the component is 'use client', render it inside a client component in a Next.js App Router app. See the Command docs for the full prop table.

For the floating Spotlight-style palette, swap Command for Command.Dialog, exposed through the same import via Object.assign. It takes controlled open and onOpenChange props and renders the menu inside the Drivn Dialog at max-w-lg. The sub-component also registers a keyboard listener in a useEffect that toggles the palette on ⌘K (or Ctrl+K on Windows and Linux), so the shortcut works the moment the component mounts — you do not wire it up yourself. Hold the open state in useState and bind it. Everything inside — Command.Input, Command.List, groups, and items — composes exactly as in the inline menu. The examples page shows a full palette with multiple groups.

Three more sub-components shape a richer menu. Command.Group takes a heading and renders a labeled section — cmdk styles the heading through the [cmdk-group-heading] selector baked into the styles.group entry. Command.Separator draws a thin divider between sections. Command.Shortcut renders a <kbd> pushed to the right of an item with ml-auto, the standard place to surface a keybinding. Because the whole file lives in your codebase, customizing it is a source edit: open src/components/ui/command.tsx, find the const styles object near the top, and adjust the item, group, or list keys. Every class reads from your Tailwind tokens, so a theme change in globals re-themes every Command instance at once.