Kbd with motion: its keys press in as you hold the real ones on your keyboard.
$ pnpm dlx shadcn@latest add https://dashral.com/r/motion-kbd.jsonInstallation
$ pnpm dlx shadcn@latest add https://dashral.com/r/motion-kbd.jsonAdds components/dashral/motion/kbd.tsx, the Kbd it builds on (in components/dashral/), motion and the motion files every motion component shares. With the registry in your components.json:
$ pnpm dlx shadcn@latest add @dashral/motion-kbdUsage
The same as Kbd, imported from components/dashral/motion/: swap the import and it moves.
import { Kbd } from "@/components/dashral/motion/kbd"
<Kbd keys={["mod", "K"]} />Examples
Compared with Default
Keys as they look on a keyboard.
Motion
The caps press in while the real keys are held, so a shortcut shown on the page shows itself working.
How the two editions differ in general, and which to use where: Motion.
API reference
Every prop of Kbd, and every attribute of the element it renders. What the Motion edition adds is marked Motion.
Kbd
Also takes every prop of <kbd>(opens in a new tab).
| Prop | Type | Default |
|---|---|---|
listen | boolean
| true |
keys | string[]A shortcut's keys, e.g. ["mod", "K"]. "mod" is ⌘ on a Mac and Ctrl elsewhere; "shift", "alt", "ctrl", "enter", "esc", "tab", "backspace", "space" and "up" / "down" / "left" / "right" show as symbols and are read out by name. | — |
children | ReactNodeA single key, as text, when keys isn't given. | — |
size | "sm" | "default"20px or 24px caps. | "default" |
className | stringExtra classes, merged with cn() so yours win. | — |
Motion
- While a key of the shortcut is held on the keyboard, its cap sinks 1.5px and shrinks a little on a spring, tinted, and springs back up as it's let go; ⌘ lets go of the rest with it, as the browser does.
- With reduced motion the caps only change color.