Kbd Component
Keyboard key styling with dynamic sizing, shape and color support.
Notes
- Base element:
<kbd>. Sizes: kbd-4 ~ kbd-15 (font-size based).
- Shapes:
kbd-rounded, kbd-square, kbd-pill, kbd-fluid.
- Colors:
kbd-* dynamic utilities (e.g. kbd-primary, kbd-error, kbd-blue-500).
Basic usage
Native kbd
Ctrl Alt Shift Esc Tab Space Enter Del
Combination shortcuts
Ctrl + C
Ctrl + Shift + I
Alt + Tab
Cmd + Shift + P
Inline in paragraph
Press Ctrl + S to save, or F11 for fullscreen.
Sizes (kbd-4 ~ kbd-15)
All sizes
4
5
6
7
8
9
10
11
12
13
14
15
Via font-size
Ctrl
Ctrl
Ctrl
Ctrl
Ctrl
Size + primary color
4
5
6
7
8
Shapes
Four shapes (kbd-6)
Rounded
Square
C
Fluid
Shapes + success color
Rounded
Square
S
Fluid
Shapes + large size (kbd-9)
Rounded
Square
C
Fluid
Theme colors
Primary
Secondary
Tertiary
Success
Error
Info
Warning
Caution
Highlight
Ink
Title
Description
Caption
Disabled
Custom colors
Multiple color formats are supported:
- 1. Theme semantic colors, e.g.
*-error, *-error-hover
- 2. Tailwind built-in colors, e.g.
*-indigo-500
- 3. Raw color values, e.g.
*-[#ff0000]
- 4. CSS named colors, e.g.
*-[red], *-[green]
blue-200
blue-500
[#ff0000]
Shape + color combinations
Rounded + colors
P
S
E
I
W
Square + colors
P
S
E
I
W
Circle + colors
P
S
E
I
W
Fluid + colors
P
S
E
I
W
Use cases
Editor shortcuts
Ctrl + P Quick open
Ctrl + Shift + F Global search
F5 Start debugging
System operations
Ctrl + Alt + Del Security options
Win + D Show desktop
Game controls
W A S D Move
Space Jump
Mouse Attack