Components

Mac Keyboard

Interactive Mac keyboard replica with real-time keystroke tracking and authentic layout geometry. Features active states for physical key presses and optional sound feedback.

Preview Canvas

Installation

Install component dependencies or run the automated CLI command.

Run the following command

pnpm dlx shadcn@latest add "https://sahilcodex.vercel.app/r/keyboard.json"

Add sound file

Place the sound assets in your public/sounds/ folder:

  • mackeysound.ogg - Audio sprite file

Usage

Import component
import CustomKeyboard from "@/components/ui/custom-keyboard";
export default function KeyboardDemo() {
return (
<div className="flex w-full items-center justify-center p-10">
<CustomKeyboard theme="dark" enableSound={true} />
</div>
);
}
"You have a right to perform your prescribed duty, but you are not entitled to the fruits of actions."
Bhagavad Gita

Design by SahilCodex
© 2026. Build with Hands.