Kbd
shadcn/ui
Keyboard shortcut indicator. Wrap multiple keys in KbdGroup for combinations.
@/components/ui/kbdKey types
| Type | Keys |
|---|---|
| Modifiers | ⌘CtrlAlt⌥Shift⇧ |
| Action keys | EnterEscTabSpaceDeleteBackspace |
| Arrows | ↑↓←→ |
| Letters / numbers | AKNS?1F1 |
Combinations — KbdGroup
| Action | Shortcut | Note |
|---|---|---|
| Command palette | ⌘K | Global search and command |
| New ticket | ⌘N | Create from anywhere |
| Save | ⌘S | Save current form or ticket |
| Close / cancel | Esc | Close modal, sheet, popover |
| Confirm | Enter | Submit form, confirm dialog |
| Select all | ⌘A | Table bulk select |
| Navigate list | ↑↓ | Move focus in list or table rows |
| Help | ⌘? | Open shortcuts reference |
In context — dropdown menu shortcuts
New ticket⌘N
Save⌘S
Search⌘K
Close panelEsc
Help & shortcuts⌘?
Tokens
| Property | Value |
|---|---|
| Background | bg-muted — neutral surface, adapts to light and dark |
| Border | border border-border — gives the physical key appearance |
| Text | text-foreground font-mono text-xs — monospace key label |
| KbdGroup | flex items-center gap-1 — positions Kbd keys side by side |
Use KbdGroup for multi-key combinations — it handles the spacing. Use bare Kbd for single keys inline in text.
On this page