Everything in the studio, without reaching for the mouse.
A keyboard shortcut sheet: groups of shortcuts drawn with kbd-combo caps, which show Command on Apple platforms and Control elsewhere, laid out in balanced columns so groups of different lengths never leave holes. A search field filters by label, by the keys as written and by their names on either platform, highlighting the match. It sits in place on a docs page, or opens as a dialog from anywhere with the question mark key, which is ignored while the reader types. Sequences like g then h, three tones and three sizes.
The import and the props worth knowing about, in one place.
import { KbdSheet } from "@/components/beste/component/kbd-sheet";
const groups = [
{
title: "Playback",
shortcuts: [
{ keys: "space", label: "Play or pause" },
{ keys: "mod+right", label: "Next track" },
],
},
{
title: "Navigation",
shortcuts: [{ keys: ["g", "h"], label: "Go home", sequence: true }],
},
];
// A dialog that opens with "?" from anywhere in the app
<KbdSheet groups={groups} />
// In place on a docs page
<KbdSheet groups={groups} inline tone="outline" />Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| ? | Opens and closes the sheet as a dialog, unless focus is in a field. |
|---|---|
| Type in the search | Filters by label, by the keys as written and by their names on either platform. |
| Escape in the search | Clears the search; a second Escape closes the dialog. |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
groups* | KbdShortcutGroup[] | — | |
title | string | — | Heading of the sheet. |
description | string | — | A line under the heading. |
inline | boolean | — | Render in place, for a docs page, instead of as a dialog. |
open | boolean | — | Whether the dialog is open, controlled. |
defaultOpen | boolean | — | |
onOpenChange | (open: boolean) => void | — | |
trigger | string | null | — | Key that opens and closes the dialog from anywhere, ignored while typing. `null` turns it off. @defaultValue "?" |
searchable | boolean | — | Show the search field. @defaultValue true |
placeholder | string | — | |
emptyMessage | string | — | Shown when the search matches nothing. |
tone | "muted" | "outline" | "ghost" | — | |
size | "sm" | "default" | "lg" | — | |
className | string | — |