shadcn.io is an independent project built on shadcn/ui
Three caps in a row read ↵ Enter, ⌫ Delete, and ⇥ Tab. The symbol and the name are one label. Nothing listens for the keys.
Use the characters when you do not want an icon. Icons stay steadier across fonts. A Tooltip can spell the action if a symbol is ambiguous. In React, Ark UI does not read the symbols as keys.
Installation
Anatomy
Usage
<div className="rounded-md border bg-background p-4">
<div className="flex gap-1">
<Kbd>↵ Enter</Kbd>
<Kbd>⌫ Delete</Kbd>
<Kbd>⇥ Tab</Kbd>
</div>
</div>FAQ
Why Unicode symbols instead of icons?
They're plain text: no import, no extra markup, and they take the cap's font, size and color. They also work anywhere text does, like Markdown docs or a plain-text tooltip.
Which Unicode symbols are standard for keys?
⌘ Command (U+2318), ⌥ Option (U+2325), ⌃ Control (U+2303), ⇧ Shift (U+21E7), ↵ Return (U+21B5), ⌫ Delete (U+232B), ⇥ Tab (U+21E5) and ⎋ Escape (U+238B), plus the arrows ← ↑ → ↓.
Do the symbols look the same everywhere?
Not quite: each comes from whatever font has it, so its size and weight vary between systems. If they must match exactly, use icons, as the Enter with Icon example does.
Do screen readers read the symbols?
Inconsistently: some say the Unicode name, some skip the symbol. Here the key name follows each symbol, so the meaning gets through either way.
API Reference
Kbd
No extra props in this demo. The rest is on the Kbd page.
