AceUi

Kbd

A keyboard key component that displays keyboard shortcuts and key combinations with authentic styling and proper symbols.

⌘
⌫
P
The Kbd component renders keyboard keys and shortcuts with realistic styling, perfect for documentation, tutorials, and UI instructions that need to show keyboard interactions

Installation

1npx shadcn@latest add "https://ace-ui-six.vercel.app/r/kbd.json"

Usage

1import { Kbd } from "@/components/ui/kbd";
2

3export default function Example() {
4return (
5  <div className="flex items-center gap-3">
6    <Kbd size="md" keys={["command", "delete", "p"]} />
7  </div>
8);
9}

Variants

1// Outline variant  
2<Kbd keys={["shift", "enter"]} variant="outline" />
3

4// Ghost variant
5<Kbd keys={["escape"]} variant="ghost" />
6

7// Different sizes
8<Kbd keys={["tab"]} size="sm" />
9<Kbd keys={["space"]} size="md" />
10<Kbd keys={["command", "k"]} size="lg" />
11

12// Single keys
13<Kbd keys={["enter"]} />
14<Kbd keys={["delete"]} />
15<Kbd keys={["escape"]} />
16

17// Multiple key combinations
18<Kbd keys={["command", "shift", "p"]} />
19<Kbd keys={["ctrl", "alt", "delete"]} />
20

21// Arrow keys
22<Kbd keys={["up"]} />
23<Kbd keys={["down", "right"]} />
24

25// Custom text keys
26<Kbd keys={["F1"]} />
27<Kbd keys={["a", "b", "c"]} />

Features

  • Realistic keyboard key styling with gradients and shadows
  • Support for special keys with proper Unicode symbols
  • Multiple sizes: sm, md, lg
  • Three variants: default, outline, ghost
  • Supports key combinations and sequences
  • TypeScript support with predefined key types

Props

PropTypeDefaultDescription
keysKbdKey[]["command", "delete", "p"]Array of keyboard keys to display
variant'default' | 'outline' | 'ghost''default'Visual style variant of the kbd component
size'sm' | 'md' | 'lg''md'Size of the keyboard keys
classNamestring—Additional CSS classes

Available Keys

The component supports the following predefined keys with special symbols:

1// Special modifier keys
2"command" → ⌘
3"shift" → ⇧  
4"ctrl" → ⌃
5"option" → ⌥
6"alt" → ⎇
7"fn" → fn
8"win" → ⊞
9

10// Action keys
11"enter" → ⏎
12"delete" → ⌫
13"escape" → ⎋
14"tab" → ⇥
15"capslock" → ⇪
16"space" → ␣
17

18// Arrow keys
19"up" → ↑
20"down" → ↓
21"left" → ←
22"right" → →
23

24// Navigation keys
25"pageup" → ⇞
26"pagedown" → ⇟
27"home" → ⇱
28"end" → ⇲
29"help" → ?