Horizontal strip of F-keys, each annotated with the action it triggers.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Keyboard10 } from "@/components/beste/piece/keyboard10";
<Keyboard10
keys={[
{
"key": "F1",
"action": "Help"
},
{
"key": "F2",
"action": "Rename"
},
{
"key": "F3",
"action": "Find next"
},
{
"key": "F4",
"action": "Close"
},
{
"key": "F5",
"action": "Reload"
}
]}
/>Titled panel listing several actions with their key combos stacked on the right.
Raycast-style action row with leading icon, description, and a trailing shortcut combo.
Row of small tactile keycaps laid out in order, great for Konami-style cheat codes or macro combos.
Raised kbd keys joined with a plus separator. Any combo works.
Row of tactile transport keycaps with the center play/pause lit in primary, flanked by track name and elapsed time.
Gaming movement cluster with W on top and A S D on the second row, lighting the active key in primary.