Kbd
stableKeyboard key or key combo, platform-aware (⌘ on Apple, Ctrl elsewhere) and hydration-safe.
Single key
minimal
Esc
Combos, variants, sizes
full
Search with Control KCtrlK or /
Control Shift PCtrlShiftPAlt EnterAlt↵Up arrow↑
Keyboard shortcut sheet
A grouped help sheet of combos and alternatives with an IconButton close bound to Esc.
composition
Keyboard shortcuts
Press Control /Ctrl/ any time to open this sheet.
General
- Command palette
- Control KCtrlK
- New chat
- Control Shift OCtrlShiftO
- Toggle sidebar
- Control BCtrlB
- Search chats
- //
Composer
- Send message
- Enter↵
- New line
- Shift EnterShift↵
- Stop generating
- EscapeEsc
- Edit last message
- Up arrow↑
Conversation
- Copy last reply
- Control Shift CCtrlShiftC
- Regenerate
- Control RCtrlR
- Previous / next reply
- Alt Up arrowAlt↑/Alt Down arrowAlt↓
- Jump to latest
- Control Down arrowCtrl↓
Voice & files
- Dictate
- Control Shift DCtrlShiftD
- Push to talk
- Alt SpaceAltSpace
- Attach a file
- Control UCtrlU
- Switch model
- Control Shift MCtrlShiftM
Installation
npx shadcn@latest add https://kuro.abstergo.fyi/r/kbd.jsonCopies the source into components/kura/kbd with its dependencies (kura-theme, kura-keys, use-platform, utils). Tokens come from the kura-theme item.
When to use it
Use it for
- Show a key or combo inline in text, menus, tooltips or docs.
- Building blocks for shortcut hints inside other components.
Reach for something else when
- A labelled hint that should also bind the shortcut — use kbd-shortcut.
- A shortcut inside a tooltip — pass `shortcut` to tooltip.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| keys | readonly KeyName[] | — | Combo to render, e.g. ["mod", "k"]. When omitted, children render as one key. |
| variant | "raised" | "ghost" | "raised" | raised = standalone keycap; ghost = inline inside buttons, tooltips and menus. |
| size | "sm" | "md" | "md" | 18px or 22px tall. |
| pressed | boolean | false | Render the pressed state. |
All native attributes of the root element, className and ref pass through.
Anatomy
- KbdOuter <kbd>. For combos it contains sr-only label text.
data-slot="kbd" - KeyOne nested <kbd> per key in a combo (aria-hidden).
data-slot="kbd-key"
Accessibility
- Combos include visually hidden text with one spoken label (“Command K”); the glyph keys are aria-hidden.
- Platform detection runs after hydration, so server HTML shows Ctrl and updates to ⌘ on Apple devices.
- Reduced motion: Pressed state does not translate.
Notes for agents
- Use `mod` for the primary modifier; never hard-code ⌘ or Ctrl glyphs.