Keyboard

Interactive MacBook-style keyboard with sound effects and key press visualization.

keyboard interactive apple macbook sound

"use client";

import { Keyboard } from "@/components/vritti/keyboard";

export function KeyboardExample() {
  return (
    <div className="flex items-center justify-center p-8">
      <Keyboard showPreview />
    </div>
  );
}

Installation


pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/keyboard"

Dependencies


pnpm add motion @tabler/icons-react

Examples

No Sound

"use client";

import { Keyboard } from "@/components/vritti/keyboard";

export function KeyboardNoSoundExample() {
  return (
    <div className="flex items-center justify-center p-8">
      <Keyboard />
    </div>
  );
}

"use client";

import { Keyboard } from "@/components/vritti/keyboard";

export function KeyboardNoSoundExample() {
  return (
    <div className="flex items-center justify-center p-8">
      <Keyboard />
    </div>
  );
}