Components

Kbd

Semantic keyboard-key chip. Two sizes: sm for inline hints (e.g. sidebar SearchButton), md for the shortcuts dialog rows. Compose several with KbdSequence to render chords or multi-chord sequences separated by literal 'then' text.

Updated Aug 28, 2026 by Leonardo Posada

Variants

Sizes

sm (h-5) for inline hints, md (size-6) for rows in the shortcuts dialog.

⌘⌘

<div className="flex items-center gap-3">
  <Kbd size="sm">⌘</Kbd>
  <Kbd size="md">⌘</Kbd>
</div>

Single chord with semantic modifier

Use the 'Mod' token so the chip renders ⌘ on Mac and Ctrl on Windows / Linux automatically. Never hardcode ⌘ / ⌥ / ⇧ in shortcut data — the user on Windows presses Ctrl.

⌘K

<KbdSequence keys={["Mod", "K"]} />

Sequence chord (no modifier)

Yuno's v2 shortcut system uses plain letter sequences (C then L = Create link, G then H = Go home). Zero browser collisions across Mac / Win / Linux, zero conflict with AltGr on Windows international keyboards.

CthenL

<KbdSequence keys={[["C"], ["L"]]} separator="then" />

Three-key sequence

Sub-section shortcuts nest a third key (G then S then R = Go to Risk conditions > Rules).

GthenSthenR

<KbdSequence keys={[["G"], ["S"], ["R"]]} />

Semantic tokens (OS-aware)

Modifier and special-key tokens translate to the platform-correct glyph at render time. Any string not in the token map (letters, digits, punctuation) renders as-is.

Token	Mac	Windows / Linux
Mod	⌘	Ctrl
Alt	⌥	Alt
Shift	⇧	Shift
Ctrl	⌃	Ctrl
Enter	↵	Enter
Esc	Esc	Esc
ArrowUp / Down / Left / Right	↑ ↓ ← →	↑ ↓ ← →

Import

Copy this import line at the top of the file where you compose this atom.

Kbd is the single chip. KbdSequence is the helper that renders a chord (one row of keys) or a sequence of chords with a literal separator between them.

import { Kbd, KbdSequence } from "@/components/ui/kbd";

Props

Everything else from the underlying HTML or Radix primitive is forwarded via ...props.

Kbd

Prop	Type	Default	Description
size	"sm" \| "md"	"sm"	sm (h-5 min-w-5) for inline hints; md (size-6) for shortcuts dialog rows.
className	string	—	Merged onto the <kbd> via cn().
...rest	HTMLAttributes<HTMLElement>	—	All other native <kbd> attributes are forwarded.

KbdSequence

Prop	Type	Default	Description
keys	string[] \| string[][] (required)	—	A single chord (["Mod","K"]) or a sequence of chords ([["C"],["L"]]) rendered with the separator between them. Modifier tokens (Mod / Alt / Shift / Ctrl / Enter / Esc / ArrowUp…) auto-translate per platform.
size	"sm" \| "md"	"md"	Applied to every Kbd chip inside the sequence.
separator	string	"then"	Text rendered between chords when keys is a string[][]. Localize this (e.g. "luego") via the caller.
className	string	—	Merged onto the outer <span> via cn().

Cross-links to atoms and patterns you may reach for next.

Keyboard shortcutsThe organism that renders many Kbd chips grouped by category, opened with ⌘K.
DialogThe surface used by the shortcuts organism above.
Typographyfont-sans font-medium — matches the Yuno rule that keyboard chips use the product font, not mono.