Mini Mac Keyboard

Pure CSS decorative compact Mac-style keyboard with subtle spring entrance from motion.dev — ideal for hero device mockups.

UniqueUI CLI

npx uniqueui add mini-mac-keyboard

shadcn CLI

npx shadcn@latest add https://uniqueui-platform.vercel.app/r/mini-mac-keyboard.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

esc

F10

F11

F12

delete

tab

[

]

caps

;

return

shift

ctrl

opt

cmd

opt

←

↑

↓

→

Usage

"use client";
import { MiniMacKeyboard } from "@/components/ui/mini-mac-keyboard";

export default function HeroDevices() {
  return (
    <div className="flex justify-center p-12">
      <MiniMacKeyboard
        wrapperClassName="translate-x-0 translate-y-0 md:translate-y-0 scale-125"
        keysClassName="bg-stone-200 text-stone-800 dark:bg-stone-800 dark:text-stone-100"
      />
    </div>
  );
}

Props

Prop	Type	Description
`wrapperClassName`	`string`	Classes on the transform layer inside the motion wrapper (placement, scale, translate). Include responsive translate resets (e.g. md:translate-y-0) if you override base position and the default uses md: breakpoints.
`className`	`string`	Classes merged onto the keyboard bezel container (chassis shell, border, padding).
`keysClassName`	`string`	Classes merged onto every key cap after the defaults — background, text, and ring overrides for a custom palette.
`indicatorRingClassName`	`string`	Classes merged onto the power-indicator gradient ring in the F12 key.
`indicatorDotClassName`	`string`	Classes merged onto the inner dot of the power indicator.