Browse components
Keyboard
A realistic compact keyboard whose keycaps sink and glow with backlight when you press the matching physical keys or click them, with a live typing strip and caps-lock LED.
Installation
npx shadcn@latest add @glint-ui/keyboardFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/keyboard.json
Usage
import { Keyboard } from "@/components/ui/keyboard";
<Keyboard accent="#c6ff3d" onKey={(code) => console.log(code)} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 40 | Key unit in px (board is 15 units wide). |
| accent | string | "#c6ff3d" | Backlight color of pressed keys. |
| variant | "graphite" | "silver" | "graphite" | Keycap and plate finish. |
| showDisplay | boolean | true | Show the typed-text strip. |
| global | boolean | false | Listen to the whole window, not just while focused. |
| onKey | ReactNode | — | `(code: string) => void` for every press, with the KeyboardEvent.code. |
| className | string | — | Extra classes for the root element. |