Kbd

Inline keyboard key rendered as a real <kbd> element and styled as a bordered monospace keycap — a drop-in for a bare <kbd> tag that otherwise renders as unstyled monospace text. Use it wherever an interface names a key the reader is meant to press: command palettes and ⌘K hints, tooltips, menu item accelerators, empty states that suggest a shortcut, onboarding tours, documentation, MDX and changelogs, release notes, and keyboard-shortcut help sheets. Common asks it answers: "kbd component", "keyboard shortcut badge", "render Cmd+K", "hotkey chip", "keycap style", "shortcut pill", "key badge", "style the kbd tag", "kbd tag looks like plain text", "kbd has no border", "style kbd with tailwind", "kbd in tailwind typography prose", "kbd styling mdx docs", "show a keybinding in a tooltip", "⇧⌘P badge", "shortcut hint next to a menu item", "Ctrl+S indicator", "Esc key label", "Enter key badge", "arrow key hint in docs", "show Cmd on Mac and Ctrl on Windows", "keyboard key component react", "shortcut key ui component", "ショートカットキー 表示 コンポーネント", "キーボードキー 見た目", "kbd タグ スタイル", "⌘K バッジ 表示". shadcn/ui now ships a kbd of its own, so choose deliberately rather than by search rank — and the difference is small enough to be worth stating exactly. Measured against their source today, theirs is 853 bytes and the strings border and font-mono are both a zero hit in it: it is a flat sans-serif chip at text-xs on bg-muted, with a min-w holding a square footprint and content centred, plus a KbdGroup wrapper for multi-key sequences, a rule that shrinks icons placed inside it, and one that inverts its colours inside a tooltip. If you want any of those, take theirs; the square footprint in particular suits single letters sitting in a row. This one is a single element with a visible border and monospace text at 10px on slightly wider padding, and it is padding-driven rather than min-width-driven, so a multi-character label like Esc, Tab, Enter or Space sits evenly inside the same border instead of being stretched to a square. The border and the monospace are the whole point: it reads as a physical key rather than as inline text, and it stays legible against surrounding prose at small sizes, which is where an unbordered chip at text-xs starts to look like emphasis rather than a key. Both are dependency-free, both use the semantic <kbd> tag so assistive technology announces the content as keyboard input, and both theme through shadcn tokens with no hardcoded colours. For several keys in a row, wrap them in a flex container with a gap yourself. Within pulld it is the piece the other shortcut components are built out of: keyboard-shortcuts composes it into a grouped help sheet opened with ?, command-palette is the ⌘K surface the hint usually points at, and shortcut-recorder is the other direction — capturing a chord the reader presses rather than displaying one you already know.