Macbook Keyboard
Tailwind class (e.g. bg-gray-900) or CSS color (#hex, rgb(), named)
Default
MacBook Keyboard
esc
esc
☀F1
F1
☀F2
F2
⌘F3
F3
🔍F4
F4
🎤F5
F5
☾F6
F6
◀◀F7
F7
▶F8
F8
▶▶F9
F9
🔇F10
F10
🔉F11
F11
🔊F12
F12
Touch ID
±§
§
!1
1
@2
2
£3
3
$4
4
%5
5
^6
6
&7
7
*8
8
(9
9
)0
0
_-
-
+=
=
⌫
⌫
⇥
⇥
Q
Q
W
W
E
E
R
R
T
T
Y
Y
U
U
I
I
O
O
P
P
{[
[
}]
]
|\
\
⇪
⇪
A
A
S
S
D
D
F
F
G
G
H
H
J
J
K
K
L
L
:;
;
"'
'
↵
↵
⇧
⇧
~`
`
Z
Z
X
X
C
C
V
V
B
B
N
N
M
M
<,
,
>.
.
?/
/
⇧
⇧
fn🌐
🌐
⌃control
control
⌥option
option
⌘command
command
⌘command
command
⌥option
option
▲
▲
◀
◀
▼
▼
▶
▶
macbook-keyboard-default-example.tsx
1<MacBookKeyboard2 keyColor="bg-gray-900"3 textColor="text-gray-200"4 glowColor="rgba(102, 187, 255, 0.7)"5 buttonBgColor=""6 className=""7/>
Controls
keyColor
textColor
glowColor
buttonBgColor
className
Installation & source
Install via the shadcn CLI or copy the registry files manually.
bash
npx shadcn@latest add @tt-ui/macbook-keyboard
Props
| Name | Type | Default | Description |
|---|---|---|---|
| keyColor | string | bg-gray-900 | Tailwind class (e.g. bg-gray-900) or CSS color (#hex, rgb(), named) |
| textColor | string | text-gray-200 | Tailwind class (e.g. text-gray-200) or CSS color (#hex, rgb(), named) |
| glowColor | string | rgba(102, 187, 255, 0.7) | CSS color used for key and keyboard glow |
| buttonBgColor | string | None | Key face color; Tailwind or CSS. Empty falls back to keyColor |
| className | string | Additional classes for the card. |