React Kbd Component Examples

The minimum viable Kbd is one element with the key label as children. Drop the component into JSX, pass a string like "Shift" or "Esc", and the rendered output is a small pill at h-5 (twenty pixels tall) with a bg-muted background, text-muted-foreground foreground, font-mono family, and text-xs size. The pointer-events-none and select-none rules in styles.base make the key non-interactive and unselectable, which matches how a physical keyboard key behaves visually inside body text.

The default variant uses the filled bg-muted text-muted-foreground recipe. There is no onClick handler on the Kbd itself — keyboard shortcuts trigger from a parent listener (a useEffect with window.addEventListener("keydown", ...)), and the Kbd is purely the visual hint that tells the user what to press. Pair single Kbd elements inline with body copy when you describe a one-key shortcut like Esc to close a Dialog.

The variant prop accepts default or outline. The default variant uses bg-muted text-muted-foreground — a filled pill that reads as a solid key against a light or dark page background. The outline variant uses border border-border text-muted-foreground — a hairline-bordered pill with no fill, which works better when the Kbd sits inside an already-tinted surface like a Tooltip, a Toast, or a Card header where a second muted fill would visually compete.

The prop is typed as keyof typeof styles.variants, so the editor autocompletes the two valid strings and a typo (variant="solid") is a compile error. Add a third variant after install by extending the styles.variants object in your local @/components/ui/kbd file — the prop type updates automatically. The full surface ships in roughly thirty lines, so the customization edit lives in one screen of code.

A two-key chord like ⌘ + K renders as two <Kbd> elements nested inside a <Kbd.Group> wrapper. The Group primitive is exposed via Object.assign(KbdRoot, { Group }) so the import is a single name — Kbd — and the call site reads as one parent with two children. The Group element applies inline-flex items-center gap-1 so the keys sit on one line with a four-pixel gap between them, matching the visual rhythm of a real keyboard.

The Command glyph comes from lucide-react as the Command icon. Drop it inside the first Kbd as a child — Drivn's styles.base includes the rule [&_svg:not([class*=size-])]:size-3 so the icon auto-sizes to twelve pixels without any className on the icon. The second Kbd holds the letter "K". The result is the standard ⌘K chord you see next to a search input at the top of every modern app. Pair this with the Command component to open a palette on the key combo.

For three-key chords like the VS Code command palette trigger Ctrl + Shift + P, nest three Kbd elements inside one Kbd.Group. The gap-1 between siblings handles the spacing — there are no explicit + separators because the inline-flex layout reads as a sequence visually. If you want a literal + glyph between keys for typographic clarity, drop a <span className="text-muted-foreground">+</span> between the Kbd elements, but most product UIs skip it because the spacing already communicates the chord.

The Group renders all three keys as default variant pills. To match a documentation aesthetic that prefers thin outlines, pass variant="outline" on each Kbd inside the Group — the variants compose freely because the prop sits on each Kbd individually, not on the Group wrapper. The full chord renders in seven lines of JSX with one import.

A common pattern is a sentence that ends with a chord — "Press ⌘K to open the search dialog." The Kbd Group nests inside a <p> tag with surrounding text on either side, separated by {' '} JSX whitespace tokens so the spaces survive Prettier. The Kbd sits at h-5 and align-items: center from the inline-flex on the Group, which puts the key centered on the text baseline of the paragraph.

The inline pattern is the most common shortcut hint in product UIs — settings pages, onboarding tooltips, empty states. Pair it with the Tooltip component for a hover hint, or with the Toast component for a transient confirmation that includes a shortcut to undo. The Kbd reads as part of the sentence because the font-mono family contrasts cleanly with the font-sans body text without breaking the line height.

A real ⌘K shortcut needs a useEffect that listens for the key combination and opens the palette. The pattern is a keydown listener on window that checks event.metaKey && event.key === "k", calls event.preventDefault() to stop the browser default (locating the search bar), and toggles a useState boolean that controls the Command palette's open state. Pair the Kbd visually next to the search input that opens the palette so the user sees what to press.

The listener runs only on the client, so the component file needs "use client" at the top. Clean up the listener in the useEffect return so it does not stack across re-renders. The same pattern handles Ctrl + K on Windows and Linux by checking event.ctrlKey instead of event.metaKey, or both with (event.metaKey || event.ctrlKey) if you want one shortcut that works across platforms. See the Command component reference for the full palette implementation.