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 takes default or outline, and both entries live in a styles.variants object directly below styles.base. The default value is bg-muted text-muted-foreground — a filled pill that holds its own against a plain page background. The outline value is border border-border text-muted-foreground — a hairline edge with no fill that inherits whatever surface sits behind it. The choice is about layering. On a bare background the filled pill reads cleanly, but inside an already-tinted container — a Tooltip bubble, a Toast, a Card header, a search trigger with its own muted background — a second fill flattens into a patch and the outline stays legible.

The typing comes from the styles object rather than a hand-written union: the prop is declared as variant?: keyof typeof styles.variants. Autocomplete offers exactly the two valid strings, and variant="solid" is a compile error rather than a silently ignored prop. Because the type is derived, adding a third variant after install is a single edit — add a key to styles.variants in your local @/components/ui/kbd file and the prop type picks it up with no second change. Both variants share every rule in styles.base, so height, padding, radius, and the SVG auto-size rule stay consistent whichever you pass.

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.