Titled panel listing several actions with their key combos stacked on the right.
The import and the props worth knowing about, in one place.
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"
]
}
]}
/>Raycast-style action row with leading icon, description, and a trailing shortcut combo.
⌘ plus K: Open command palette
Keycaps press down one after another, their shadows shrinking as they sink, and the matching action label fades in beside them before the next shortcut takes a turn.
Vim-style multi-step combo showing keys separated by arrows with per-step labels.