Sticker Kbd
A keycap with a hard bottom lip that compresses to nothing when the key goes down.
DisplayClient component
Preview
Press⌘Kto search
Shift+?for shortcuts
Esccloses anything
Installation
The CLI writes the source into your project and pulls in whatever it depends on.
$
pnpm dlx shadcn@latest add @duck/sticker-kbdPulls in @duck/theme. Already installed items are skipped.
Usage
import { StickerKbd } from "@/components/ui/sticker-kbd"The file lands in components/ui/sticker-kbd.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.
Props
Everything not listed here is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| watch | string | - | A KeyboardEvent.key to listen for, case-insensitive. The cap presses while that key is held anywhere on the page. |
| meta | boolean | false | Also require the platform command key — Meta on Apple, Control elsewhere. |
Rules
What keeps this component from turning into noise.
- All of the motion is reactive, so it costs nothing against the one-idle-animation rule. Use as many as the page needs.
- Print the key the user actually has to press. ⌘ on Apple, Ctrl elsewhere — decide at runtime, do not guess in the markup.