Get everything for $99, lifetime

Components

Keyboard

Pro
press any key

Installation

ProRequires a Planes Pro license.
npx shadcn add @useplanes/keyboard

Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.

Unlock with Planes Pro

$99 once · 161 Pro components · lifetime updates.

I have a licenseGet Pro
import { Keyboard } from "@/components/ui/Keyboard";

<Keyboard
  lit={["MetaLeft", "KeyK"]}
  accent="#4087f7"
  onKey={(code, down) => down && console.log(code)}
/>

Use cases

  • Shortcut teaching

    Light the keys of a shortcut on a docs or onboarding page instead of writing ⌘⇧P in text.

  • Keyboard-first product pages

    Show which keys your app listens for, the way Xenon lights its gesture keys.

  • Typing and shortcut trainers

    Turn listen on and let users see their own presses land on the board.

  • Hero backdrops

    A tilted, faded board behind a headline gives a hardware feel without a photo.