Keyboard

Interactive keyboard component with customizable key styling and a beautifully minimal interface.

Installation

npx shadcn@latest add @scrollxui/keyboard

import Keyboard from "@/components/ui/keyboard";

<Keyboard
     showWASD={true}
     wasdColorClassName="text-green-500"
     wasdKeyShadowClassName="shadow-green-500"
    />

Interactive keyboard component with customizable key styling and a beautifully minimal interface.

Property	Type	Default	Description
`className`	string	`—`	Custom classes applied to the keyboard wrapper container.
`containerClassName`	string	`—`	Custom classes applied to the outermost background container.
`showWASD`	boolean	`false`	Highlights the W, A, S, D keys when enabled (useful for gaming UI).
`wasdColorClassName`	string	`—`	Custom text color classes applied specifically to highlighted WASD keys.
`wasdKeyShadowClassName`	string	`—`	Custom shadow class applied to highlighted WASD keys.
`textClassName`	string	`—`	Overrides text styling for all key labels.
`keyShadowClassName`	string	`—`	Overrides the default key shadow styling for all keys.