Kbd
A component for displaying keyboard keys and shortcuts.
K⌘KCtrlShiftP
Installation
pnpm dlx shadcn@latest add @columbus/kbdUsage
import { Kbd, KbdGroup } from "@/components/ui/kbd";
<KbdGroup>
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
</KbdGroup>;Icons
Lucide icons inside a key are sized for you. <kbd> can't take an
aria-label, so give icon keys visually hidden text:
<Kbd>
<ArrowUpIcon aria-hidden="true" />
<span className="sr-only">Up arrow</span>
</Kbd>In an input
Show a shortcut inside a search field with Input Group.
API reference
| Component | Renders | Description |
|---|---|---|
Kbd | <kbd> | A single key. |
KbdGroup | <kbd> | A key combination. Wraps Kbds with a small gap. |
Both accept every native <kbd> attribute.