Keyboard Illustration

A self-scaling keyboard illustration.

esc

F1

F2

F3

F4

F5

F6

F7

F8

F9

F10

F11

F12

⏻

~`

!1

@2

#3

$4

%5

^6

&7

*8

(9

)0

_-

+=

delete

tab

Q

W

E

R

T

Y

U

I

O

P

{[

}]

|\

caps lock

A

S

D

F

G

H

J

K

L

:;

"'

return

shift

Z

X

C

V

B

N

M

<,

>.

?/

shift

fn

⌃control

⌥option

⌘command

⌘command

⌥option

Installation

1
Install the component:
npx shadcn@latest add https://ui.amines.fun/r/keyboard-illustration.json
2
Usage:
jsx
app/page.jsx
```
1<Keyboard theme="dark" />
```

Props

Prop	Type	Default	Description
theme	string	"light"	Color theme of the keyboard.
sound	boolean	false	Enable keypress sound.
soundSrc	string	"/type.wav"	Source URL for the keypress sound.
className	string	—	CSS class applied to the outer wrapper.
style	object	—	Inline styles applied to the outer wrapper.