Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Keyboard

A keyboard that shows a shortcut where it lives: its keys are lit, and keys pressed on the real keyboard press down on this one, so people can try the shortcut and see it land. The layout follows the reader's platform.

Pro
pnpm dlx shadcn@latest add @caliper/keyboard

Learn the shortcuts

Try one: the keys light as you press them.

`1234567890-=⌫
tabQWERTYUIOP[]\
capsASDFGHJKL;'enter
shiftZXCVBNM,./shift
ctrlwinaltaltctrl←↑↓→

Press search on your keyboard.

Installs components/ui/keyboard.tsxDepends on none beyond ReactMotion none in component source

When to use

Use it for

  • Teaching a product's key shortcuts in onboarding, docs or a what's-new note.
  • A shortcut settings page, beside the recorder.

Skip it when

  • Listing many shortcuts; use the shortcut sheet.
  • Inside dense app chrome; it is a teaching surface.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Watches, never takes
It listens to the page's key events without preventing them, so trying a shortcut still does what it does.

Styling

Sized by its own width
Keys are a fifteenth of the keyboard's width (container units), so it fits a phone without a breakpoint.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/keyboard

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source. It is built from Keyboard and shortcutCodes.

example.tsx
import { Keyboard, shortcutCodes } from "@/components/ui/keyboard"

The worked example comes with Pro

The 55-line example behind the preview opens here, ready to copy.

  • 576 Pro parts, blocks and page templates, all with source
  • $199 once, with a year of updates. What you have stays yours
  • A full refund within 14 days if it is not for you
Checking your licence…

API reference

Keyboard

component
PropTypeDefaultDescription
shortcutstring—The combination to light, e.g. "mod+k" or "shift+enter".
labelstring—
listenbooleantruePress keys on screen as they are pressed on the real keyboard.
platformKbdPlatform—
onPress((code: string, event: KeyboardEvent) => void)—Every key code pressed while listening, for a demo that reacts to the shortcut.
classNamestring—

shortcutCodes

component

No props of its own; it accepts the native props of its root element.

Accessibility

It exposes img semantics, with aria-label kept in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.

All Actions examples