How to Add a Kbd to a React App

Before installing the Kbd, 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. Like the input and badge, the Kbd pulls in no other Drivn components and imports no icons itself — you supply icons like the Lucide Command glyph as children — so it is a single self-contained file, one of the simplest components to add first when you are trying Drivn in an existing app.

Run the CLI from your project root to add the Kbd source file. The command prompts once for your install directory (defaulting to src/components/ui/), writes kbd.tsx, and finishes — there are no dependencies to resolve, so nothing else is written to your project and nothing is added to package.json. No global config file is created; the result is one TypeScript file 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.

Open the page where the hint should live and import Kbd from your UI directory. In its simplest form it is one element with the key label as its child: <Kbd>Esc</Kbd>. The component wraps your text in a native <kbd> styled to a compact h-5 min-w-5 pill with a font-mono text-xs font-medium label and a bg-muted fill. The variant prop switches between default (the filled chip) and outline (a bordered chip that reads lighter against dense UI), and it is typed as keyof typeof styles.variants, so your editor autocompletes the two options and a typo is a compile error. Because the element is pointer-events-none, it never intercepts a click meant for the control behind it, so you can place a hint inside a button or a menu row safely. See the Kbd docs for the full prop table.

Most shortcuts are combos, and Kbd.Group lays them out. It is exposed through Object.assign(KbdRoot, { Group }), so a single import gives you both the key and the group, and the call site reads as one parent with children. The Group renders an inline-flex items-center gap-1 wrapper so several Kbd elements sit together with even spacing, matching the ⌘K badge you see in Linear, Raycast, and the Drivn command search. Icons work as children: pass a Lucide Command component inside a Kbd and the base class [&_svg:not([class*=size-])]:size-3 sizes the glyph to match the text automatically, so ⌘ lines up with the K without any width or height class on the icon. This is still pure markup — the badge advertises the shortcut; the listener that acts on it comes next. For more combos see the Kbd examples.

The Kbd renders the hint, but it never listens for keystrokes — pointer-events-none and no event handlers means the shortcut logic is yours. Add a small 'use client' component that registers a keydown listener in a useEffect, checks for your combo (for example e.key === 'k' && (e.metaKey || e.ctrlKey)), and runs your action; render the same Kbd.Group badge inside it as the visible trigger. Styling is just as direct: every class lives in one styles object at the top of the file you own. base holds the shared shape and the icon-sizing rule, variants holds the default and outline looks, and group holds the inline-flex items-center gap-1 layout Kbd.Group uses. Edit any of them once and every hint updates; because the colors read from Tailwind tokens, changing them in theming re-themes the hints for dark and light mode.