What it does
Kbd turns a key or chord into styled keycaps backed by semantic <kbd> elements. A single key comes from children, while the keys array renders a sequence of keycaps joined by an optional separator node.
The static entry renders instantly, while the animated entry adds a subtle press or pop motion when a keycap mounts.
Composition and API
Import Kbd from the kbd entrypoint, or KbdAnimated from kbd/animated for the motion variant. Use children for a single keycap, keys for a chord, and separator for the node between keycaps. Tune the look with appearance and size.
Common use cases
Reach for Kbd wherever a keyboard shortcut needs to be visible: command palettes, help menus, tooltips and buttons that expose hotkeys, onboarding tours, and settings or cheat-sheet screens that list key bindings.
Accessibility
Each keycap renders a native <kbd> element so the shortcut is exposed as keyboard input to assistive technology. Keep separators meaningful (for example "+" or "then") and ensure the surrounding context names what the shortcut does.
Next.js integration notes
The static Kbd is a plain presentational component and works in server and client components alike. KbdAnimated relies on framer-motion, so render it inside client components or interactive islands.
FAQ
How do I render a multi-key chord?
Pass the keys prop an array such as keys={['⌘', 'K']} and set separator to the node you want between keycaps, like "+" or "then". Each entry renders as its own keycap.
What is the difference between children and the keys prop?
Use children for a single keycap, e.g. <Kbd>Esc</Kbd>. Use keys for a chord of multiple keycaps. When keys is provided it takes precedence over children.
Does Kbd render semantic markup?
Yes. Each keycap is a real <kbd> element wrapped in a span, so assistive technology and styling hooks recognize the shortcut as keyboard input.