Keyboard
A mac style keyboard component with mechanical keys sound effects.
Installation
Run the following command
npx shadcn@latest add @aceternity/keyboardAdd sound file
Download the sound files and place them in your public/sounds/ folder:
- sound.ogg - Audio sprite file
- config.json - Sound timing configuration
Examples
Keyboard Demo With Sound
Keyboard Demo Without Sound
Keyboard Demo With Preview
Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the container |
enableSound | boolean | false | Enable keyboard sound effects on key press |
showPreview | boolean | false | Show keystroke preview animation above keyboard |
Notes
- Sound requires
/sounds/sound.oggfile in the public folder - Event listeners only active when keyboard is visible in viewport
- Responsive scaling: 0.8x (mobile) → 2x (xl screens)
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
100+ templates and blocks combined
Ready to copy paste component blocks, save days of development time
