refrence.md

Keyb

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

esc

F1

F2

F3

F4

F5

F6

F7

F8

F9

F10

F11

F12

del

~`

!1

@2

#3

$4

%5

^6

&7

*8

(9

)0

_-

+=

pgup

tab

Q

W

E

R

T

Y

U

I

O

P

{[

}]

|\

pgdn

caps lock

A

S

D

F

G

H

J

K

L

:;

"'

return

home

shift

Z

X

C

V

B

N

M

<,

>.

?/

shift

end

ctrl

option

fn

ctrl

"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

pnpmyarnnpmbun

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.

theme"classic" | "mint" | "royal" | "dolch" | "sand" | "scarlet""classic"

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.

made by @himanhacks