Next.js Kbd for Keyboard Shortcut Hints

Drivn installs through a small CLI that writes the component source directly into your repository — there is no runtime npm package to version-lock. From the root of your Next.js 16 project run npx drivn add kbd. The Kbd has no component dependencies and imports no icons itself, so the CLI writes a single kbd.tsx file and nothing else. The CLI reference documents every flag, including targeting a custom directory or installing several components at once. After install you own the file; future Drivn releases will not overwrite it. Commit the change for a clean baseline before you compose it into hints and shortcuts, and confirm the file landed under your UI directory in the editor.

Because the Kbd holds no state and runs no effect, its source has no 'use client' directive — you can import and render it inside a server component with zero client JavaScript shipped for the hint. A single key is <Kbd>Esc</Kbd>; the component wraps your text in a native <kbd> element styled to a compact h-5 min-w-5 pill with a monospace label. The variant prop switches between default (a filled bg-muted chip) and outline (a bordered chip that reads lighter against dense UI). Set it to match the surface — filled inside a card, outline against a busy toolbar. 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 menu row safely. See the installation guide for project setup.

A single key is rarely enough — most shortcuts are combos, and Kbd.Group exists to lay them out. It 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 manual sizing. This is still pure markup — a badge that advertises a shortcut renders on the server alongside your header. The actual key handling comes next; the badge and the listener are deliberately separate. For copy-paste 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 to add, and that part does need the client. Put a small 'use client' component next to the badge, register a keydown listener in a useEffect, and act when the combo fires. The pattern below opens a menu on ⌘K / Ctrl+K and renders the same Kbd.Group badge as its trigger label, so the visual hint and the real binding live in one island while the page around it stays on the server. Keep the listener component small — only the interactive part hydrates, and the server still streams the rest of the route. This clean split is the whole reason Kbd ships without a client boundary.

Every class the Kbd renders lives in a single styles object at the top of the file you own after install. base sets the shared shape — pointer-events-none inline-flex items-center, the h-5 w-fit min-w-5 gap-1 rounded-sm px-1 box, a font-mono text-xs font-medium label, and the [&_svg:not([class*=size-])]:size-3 rule that sizes child icons. variants holds the two looks: default is bg-muted text-muted-foreground, outline is border border-border text-muted-foreground. group is the inline-flex items-center gap-1 wrapper Kbd.Group uses. Edit any of them once and every key hint in your app updates, and because the colors read from your Tailwind tokens, changing them in theming re-themes the hints for dark and light mode automatically. The styles object below is copied verbatim from kbd.ts.