macOS modifier symbols laid out side by side with their names printed below.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Keyboard8 } from "@/components/beste/piece/keyboard8";
<Keyboard8
heading="Modifier keys"
modifiers={[
{
"symbol": "⌘",
"name": "Command"
},
{
"symbol": "⌥",
"name": "Option"
},
{
"symbol": "⇧",
"name": "Shift"
},
{
"symbol": "⌃",
"name": "Control"
}
]}
/>Four-way directional pad with a pressed state that highlights one key at a time.
Gaming movement cluster with W on top and A S D on the second row, lighting the active key in primary.
Titled panel listing several actions with their key combos stacked on the right.
Vim-style multi-step combo showing keys separated by arrows with per-step labels.
Raised kbd keys joined with a plus separator. Any combo works.
Lit-up key with a pinging halo behind it and a caption beneath to cue the user.