Keyb

A Keychron K2 inspired keyboard component with optional haptics and mechanical sound effects.

"use client";
import { Keyboard } from "@/components/ui/keyboard";

export default function Page() {
  return (
    <div className="flex min-h-96 w-full items-center justify-center py-10 md:min-h-180">
      <Keyboard theme="classic" enableHaptics enableSound />
    </div>
  );
}

Installation

1. Run the following command

pnpm dlx shadcn@latest add https://keyb.himan.me/r/keyboard.json

2. Download the sound.ogg and place it in your public/sounds/ folder, or just run below commands:

mkdir -p public/sounds
curl -L https://keyb.himan.me/sounds/sound.ogg -o public/sounds/sound.ogg

Usage

import { Keyboard } from "@/components/ui/keyboard"

<Keyboard enableHaptics={true} enableSound={true} theme="mint" />

Event Callback Usage

"use client";
import { Keyboard, type KeyboardInteractionEvent } from "@/components/ui/keyboard";

export default function Page() {
  return (
    <Keyboard
      theme="mint"
      enableHaptics
      enableSound
      onKeyEvent={(event: KeyboardInteractionEvent) => {
        console.log(event.code, event.phase, event.source);
      }}
    />
  );
}

API Reference

Prop

Type

Default

Description

classNamestringundefined

Adds classes to the root keyboard container.

Selects one of the built-in keyboard themes.

enableHapticsbooleantrue

Turns haptic feedback on supported devices on or off.

enableSoundbooleantrue

Turns mechanical key sound playback on or off.

soundUrlstring"/sounds/sound.ogg"

Path to the keyboard audio sprite file.

onKeyEvent(event: KeyboardInteractionEvent) => voidundefined

Fires on every key down/up from physical or pointer input.

KeyboardInteractionEvent

Field

Type

Description

codestring

KeyboardEvent code, for example KeyA, Enter, ArrowLeft.

phase"down" | "up"

Whether the interaction is key press or key release.

source"physical" | "pointer"

Physical keyboard event or key click/touch on UI.