Layout UI

Kbd

Keyboard shortcut hint, with KbdGroup for sequences.

Preview

⌘⇧⌥⌃EnterEscTab

Installation

bash
npx shadcn@latest add @layout/kbd

Usage

tsx
import { Kbd, KbdGroup } from "@/components/ui/kbd"

Examples

Key combinations with KbdGroup

⌘K⌘⇧PCtrlS⌘Z

In a menu context

Open command palette⌘K
New project⌘N
Save⌘S
Search⌘F

Guidelines for AI agents

Display keyboard shortcuts in menus, tooltips and docs. Group combinations with KbdGroup.

Never

  • Neverfake kbd styling with Badge; Kbd uses the mono font token

Tokens consumed

--layout-muted--layout-muted-fg--layout-font-mono