Mac Keyboard

Fully interactive Mac-style keyboard with Web Audio synthesised click sounds, Framer Motion keycap animations, and real-time physical keyboard highlighting.

Motion Effectshoverspringkeyboardinteractivesoundanimationmacinputaudio

Mac Keyboard — Variant 1

Keyboard 1 — With Mechanical Sound

Click keys or type…

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

layout

Full layout or compact (no Fn row).

theme

Visual theme; auto tracks the document dark class.

enableSound

Toggle synthesised click sounds.

soundType

Timbre of the synthesised key sound.

volume

Master volume (0 – 1).

showFunctionRow

Show or hide the Esc + F-key row.

keyClassName

Extra classes on every keycap.

Generated JSX

Copy this into your page.

<MacKeyboard
  layout="mac"
  theme="auto"
  enableSound={true}
  soundType="mechanical"
  volume={0.6}
  showFunctionRow={true}
  keyClassName=""
/>

Mac Keyboard — Variant 2

Keyboard 2 — Without Sound

No audio

Click keys or type…

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

layout

Full layout or compact (no Fn row).

theme

Visual theme; auto tracks the document dark class.

enableSound

Toggle synthesised click sounds.

soundType

Timbre of the synthesised key sound.

volume

Master volume (0 – 1).

showFunctionRow

Show or hide the Esc + F-key row.

keyClassName

Extra classes on every keycap.

Generated JSX

Copy this into your page.

<MacKeyboard
  layout="mac"
  theme="auto"
  enableSound={true}
  soundType="mechanical"
  volume={0.6}
  showFunctionRow={true}
  keyClassName=""
/>

Animation effects

hoverspring

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

Installation

Mac Keyboard — Variant 1

Shape the component before you copy it.

Mac Keyboard — Variant 2

Shape the component before you copy it.

Animation effects