Keyboard
ProA MacBook keyboard drawn in CSS with real key-unit geometry: light or dark caps, a perspective tilt that dissolves into the page, chosen keys lit in your accent color, and every physical key you press sinking and glowing on screen.
Installation
npx shadcn add @useplanes/keyboard
Unlock with Planes Pro
$99 once · 80 Pro components · lifetime updates.
<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.
Related components
All Controls components
Segmented Control
Segmented tabs with a pill that stretches as it moves and settles into the selected tab.
Number Stepper
A number input with rolling digits and plus and minus buttons that spring on press.
Email Capture
An email signup that expands from a button and animates from idle into a success state.
Card Stack
Stacked notification cards that fan out into a full list, then collapse back into a compact peek.
Date Picker
A calendar picker with spring month transitions and day cells that stagger in as you navigate.
Animated Select
A searchable, grouped select that becomes a drag-to-dismiss bottom sheet on mobile and a spring popover on desktop.