ComponentsDisplay

Kbd

Shows a keyboard key or shortcut.

Playground

⌘K

<Kbd title="Command">⌘</Kbd>
<Kbd>K</Kbd>

Usage#

The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.

npm i junco @junco/tailwind

import { Kbd } from "junco";

<Kbd title="Command">⌘</Kbd><Kbd>K</Kbd>

Press ⌘ K to search, or / anywhere. Esc closes.

Also takes every native <kbd> attribute.

Prop	Type	Default
`title` Spell out symbols like ⌘ or ⇧ so they read clearly.	`string`	`–`

Renders a real <kbd> element.
Symbols such as ⌘ are read inconsistently by screen readers; add a title or visually hidden text.