Q: What is a shadcn kbd?

A shadcn Kbd is the styled ` ` element you use to display keyboard keys and shortcuts — `⌘K`, `Ctrl+S`, `Esc`, the arrow keys. It's the visual chrome that says "this is a key on your keyboard". Built on the semantic HTML ` ` element with shadcn/ui styling that gives it the lightly-raised, monospaced look users recognize from docs sites and command palettes.

Question 1

What is a shadcn kbd?

Accepted Answer

A shadcn Kbd is the styled `` element you use to display keyboard keys and shortcuts — `⌘K`, `Ctrl+S`, `Esc`, the arrow keys. It's the visual chrome that says "this is a key on your keyboard". Built on the semantic HTML `` element with shadcn/ui styling that gives it the lightly-raised, monospaced look users recognize from docs sites and command palettes.

Question 2

Are these kbd examples free?

Accepted Answer

Yes, every kbd example on shadcn.io is free for personal and commercial use — no attribution requirement, no runtime dependency, no gating.

Question 3

Why use a Kbd component instead of just text?

Accepted Answer

Visual scanability + semantic correctness. The boxed, monospaced styling of a Kbd makes "⌘K" visually distinct from prose — users see it as a key without reading it. Semantically, `<kbd>` tells screen readers and assistive tech that this content represents keyboard input, which they may announce differently. Plain text "Cmd+K" is functional but uglier and semantically vaguer.

Question 4

When should I show keyboard shortcuts in my UI?

Accepted Answer

Anywhere a power user can fire the action with a key — command palette items ("Open new file ⌘N"), menu items ("Save ⌘S"), tooltip hints on icon buttons, settings pages documenting shortcuts. Don't show shortcuts for actions that don't have one — a kbd next to every button is noise. Show them for the 5-10 actions users use most often, then provide a comprehensive shortcuts reference (Cmd+/) for the rest.

Question 5

Should I use ⌘ symbols or text labels (Cmd / Ctrl)?

Accepted Answer

Symbols (⌘ ⌥ ⇧ ⌃ ↵ ⏎ ⌫) read faster for Mac-native users and are the convention in design tools (Figma, Sketch, Linear). Text labels (Cmd / Ctrl / Shift / Alt) work better for cross-platform apps where many users are on Windows. The platform-specific variant in this gallery shows how to detect the platform via `navigator.platform` and render the right symbol set automatically — "⌘" on Mac, "Ctrl" on Windows / Linux.

Question 6

How do I display a key sequence (press Esc, then S)?

Accepted Answer

Use the sequence variant. Render two Kbds with a comma separator and the word "then" between them: `Esc, then S`. cmdk and other command palettes use this for two-key sequences. Don't conflate sequences with chords (Cmd+S = press both at once, vs Esc, then S = press one, release, press the next). The visual spacing should make the difference obvious.

Question 7

How do I show arrow keys, function keys, and special keys?

Accepted Answer

Arrow keys: ↑ ↓ ← → as text content inside Kbd, or use lucide ArrowUp / ArrowDown / etc. icons inside for finer visual control. Function keys: F1 / F2 / F3 as plain text inside Kbd. Special keys (Esc, Tab, Enter): text labels inside Kbd. The function-keys variant in this gallery shows the F-row layout; the arrow-keys variant shows the inverted-T cluster pattern for key reference docs.

Question 8

How do I install a kbd example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading. The CLI copies the example's TSX source into `components/examples/kbd/…`, plus the shadcn/ui Kbd primitive if you don't already have it. The Kbd primitive is tiny — just styled `<kbd>` — so the install adds almost no bundle weight.

Question 9

How do I detect Mac vs Windows to show the right modifier key?

Accepted Answer

On the client: `navigator.platform.toLowerCase().includes('mac')` returns true for Mac. Build a small `useIsMac()` hook that returns boolean, then render `{isMac ? '⌘' : 'Ctrl'}` for the modifier. Useful for cross-platform apps where you want the shortcut to MATCH the user's keyboard. The platform-specific variant in this gallery shows a clean implementation.

Question 10

How do I size kbds for different contexts (tooltip, menu, docs)?

Accepted Answer

Default Kbd works for most inline contexts. For dense menu rows where the kbd shouldn't compete with the label, drop to `text-[10px] px-1 py-0`. For docs / cheat-sheet pages where the kbds ARE the focus, scale up via `text-base px-2.5 py-1`. The sizes variant in this gallery shows three scales — pick consistently per context.

Question 11

Which libraries do kbd examples depend on?

Accepted Answer

shadcn/ui Kbd (the styled wrapper generated into your project), Tailwind CSS, and (for icon-based variants) Lucide React. React 19 baseline. No state library — Kbd is pure render. Platform detection uses `navigator.platform` directly, no extra dependency.

Question 12

Are kbd examples accessible for screen reader users?

Accepted Answer

Yes. The semantic `<kbd>` element is recognized by screen readers as keyboard input. For shortcuts displayed inline with text ("Press ⌘K to open"), screen readers read it correctly. For pure-symbol shortcuts where the meaning isn't obvious from text-to-speech ("⌘" might read as "squiggly"), add `aria-label="Command K"` on the Kbd element so SR users hear the keys spelled out.

Question 13

Can I use these kbd examples with React Server Components?

Accepted Answer

Yes — Kbd is pure render with no client state. It works cleanly as a Server Component. The exception is platform-aware Kbds that need `navigator.platform` — those need a tiny client wrapper. For SEO-friendly pages where kbds appear in the static HTML (docs, marketing), keep the Kbd server-rendered and let crawlers see them as keyboard hints.

React Kbd Examples for shadcn/ui

Browse every kbd example

Frequently Asked Questions