Docs
Keyboard
Keyboard
Displays an animated keyboard with keycaps that can be customized with different colors and variants.
`~
@2
#3
$4
%5
^6
&7
*8
(9
)0
_-
+=
Tab
Q
W
E
R
T
Y
U
I
O
P
Caps
A
S
D
F
G
H
J
K
L
:;
"'
Shift
Z
X
C
V
B
N
M
<,
>.
?/
alt
⌘
Space
⎇
Installation
Examples
`~
@2
#3
$4
%5
^6
&7
*8
(9
)0
_-
+=
Tab
Q
W
E
R
T
Y
U
I
O
P
Caps
A
S
D
F
G
H
J
K
L
:;
"'
Shift
Z
X
C
V
B
N
M
<,
>.
?/
alt
⌘
Space
⎇
1
2
3
4
5
6
7
8
9
Tab
Q
!1
A
@2
Caps
Usage
import {
Keycap,
KeyRow,
Keyboard,
} from "@/registry/components/animated-keyboard";<Keyboard>
<KeyRow>
<Keycap variant="tab" char="Tab" />
<Keycap char="Q" />
<Keycap variant="double" char="1" secondaryChar="!" />
</KeyRow>
<KeyRow>
<Keycap char="A" />
<Keycap variant="double" char="2" secondaryChar="@" />
<Keycap variant="caps" char="Caps" />
</KeyRow>
</Keyboard>Props
Keycap props.
| Prop | Type | Description | Default |
|---|---|---|---|
| height | string | Height of the keycap. | "56px" |
| keylightColor | "default" | "red" | "blue" | "green" | "purple" | "rgb" | Color of the keycap's light effect. | "default" |
| char | string | Main character displayed on the keycap. | - |
| secondaryChar | string | Secondary character displayed on the keycap (only for variant="double"). | - |
| variant | "default" | "double" | "tab" | "caps" | "shift" | "command" | "space" | Variant of the keycap. | "default" |
| className | string | Additional custom classes. | - |
Keyboard props.
| Prop | Type | Description | Default |
|---|---|---|---|
| children | ReactNode | Child components to be rendered inside the keyboard. | - |
| className | string | Additional custom classes. | - |
| gap | "sm" | "md" | "lg" | Spacing between key rows. | "md" |
KeyRow props.
| Prop | Type | Description | Default |
|---|---|---|---|
| children | ReactNode | Child components to be rendered inside the key row. | - |
| className | string | Additional custom classes. | - |
| gap | "sm" | "md" | "lg" | Spacing between keycaps. | "md" |