Titled panel listing several actions with their key combos stacked on the right.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Keyboard3 } from "@/components/beste/piece/keyboard3";
<Keyboard3
title="Keyboard shortcuts"
shortcuts={[
{
"label": "Open search",
"keys": [
"⌘",
"K"
]
},
{
"label": "New file",
"keys": [
"⌘",
"N"
]
},
{
"label": "Toggle sidebar",
"keys": [
"⌘",
"B"
]
},
{
"label": "Switch workspace",
"keys": [
"⌘",
"⇧",
"O"
]
}
]}
/>Raised kbd keys joined with a plus separator. Any combo works.
Raycast-style action row with leading icon, description, and a trailing shortcut combo.
Vim-style multi-step combo showing keys separated by arrows with per-step labels.
Row of small tactile keycaps laid out in order, great for Konami-style cheat codes or macro combos.
Horizontal strip of F-keys, each annotated with the action it triggers.
Long-format spacebar keycap with a soft shadow, bracketed by a prompt above and a hint caption below.