ComponentsFoundations

Kbd

Shows keyboard keys and shortcuts. Platform-aware: mod renders as ⌘ on Apple devices and Ctrl elsewhere, with spoken key names for screen readers.

components/kbd.tsx, lib/use-hotkeys.tstheme · material · accent · density · font

Press CtrlControlK to search posts, people and settings

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { Kbd, KbdGroup } from "@vamos-ui/react";

<Kbd>Esc</Kbd>
<KbdGroup keys="mod+k" />

The kit itself only registers mod+k, mod+\ and opt-in layout shortcuts; everything else belongs to the app.

Examples

Platform-aware shortcuts

mod is ⌘ on macOS/iOS and Ctrl elsewhere; modifiers follow platform order (⌃ ⌥ ⇧ ⌘). The server renders the Ctrl form, the client upgrades without a hydration mismatch.

Save draft: CtrlControlS
Publish: CtrlControlShiftEnter
Insert link: CtrlControlK
Toggle sidebar: CtrlControl\

Sizes & variants

sm for menus and inputs, md for prose. ghost is border-only; nav sits on the dark sidebar.

EscEscShift?CtrlControlEnter

Quick switch CtrlControlK

Search field hint

A trailing hint inside an Input, as in the top bar.

CtrlControlK

Shortcut help (CMS editor)

Sequences use an array of keys and a visible separator such as "then".

Keyboard shortcuts

Work faster in the post editor.

Navigation

Go to postsGthenP

Go to mediaGthenM

Open command menuCtrlControlK

Editor

BoldCtrlControlB

Heading 2CtrlControlAlt2

Show shortcutsShift?

API

Kbd

Prop	Type	Default
`keyName` Render a key token platform-aware: mod, ctrl, meta, alt, shift, enter, esc, tab, space, backspace, delete, up/down/left/right, or any character.	`KeyName`	`—`
`size` Keycap height (18 / 24 px).	`"sm" \| "md"`	`"md"`
`variant` Inset keycap, border only, or for the dark sidebar.	`"default" \| "ghost" \| "nav"`	`"default"`
`labels` Spoken key names (kbd namespace): command, control, option, shift, enter, backspace…	`Partial<KbdLabels>`	`—`
`children` Free text when keyName is not set.	`ReactNode`	`—`

KbdGroup

Prop	Type	Default
`keys` A shortcut string ("mod+shift+k") or a list of keys (["g", "p"]).	`string \| KeyName[]`	`—`
`separator` Visible text between keycaps ("then", "+"). Default none.	`ReactNode`	`—`
`size / variant / labels` Passed to every Kbd.	`—`	`—`

Helpers (lib/use-hotkeys)

Prop	Type	Default
`formatShortcut(s, { isMac })` "mod+k" → "⌘K" / "Ctrl+K".	`string`	`—`
`shortcutKeys(s, isMac)` Canonical key tokens in platform order.	`string[]`	`—`
`useHotkeys(s, handler, options)` Register shortcuts. Plain keys are ignored while typing; modifier shortcuts are not (enableOnFormFields).	`void`	`—`
`useIsMac()` SSR-safe platform check (false on the server).	`boolean`	`—`

Kanban

Lightbox