Phone-style number pad with tactile keycaps and a row of filled dots tracking how many digits are entered.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Keyboard12 } from "@/components/beste/piece/keyboard12";
<Keyboard12
entered={4}
total={6}
caption="Enter your 6-digit PIN"
/>Row of small tactile keycaps laid out in order, great for Konami-style cheat codes or macro combos.
Large tactile keycap with subtle shadow and a caption reading underneath.
Rounded pill that embeds a keycap between prefix and suffix copy for quick prompts.
Four-way directional pad with a pressed state that highlights one key at a time.
Row of tactile transport keycaps with the center play/pause lit in primary, flanked by track name and elapsed time.
Long-format spacebar keycap with a soft shadow, bracketed by a prompt above and a hint caption below.