Keycap

A key with travel. Its face sits on a short wall that folds away as it goes down, quick on the way in and on a spring on the way back up. It follows your keyboard: press K anywhere on this page and every K cap goes down with your finger. Try typing.

Installation

Terminalbash
npx @neelshha/ui@latest add keycap

Usage

page.tsxtsx
import { Keycap } from "@/components/ui/keycap";

<Keycap>⌘</Keycap>
<Keycap>K</Keycap>

The legend names the key a cap follows, so there's usually nothing to wire up. Symbols map to their keys: ⌘ to Command, ⌥ to Option, ⇧ to Shift, ↵ to Enter. Letters also match their physical key, so ⌥K on a Mac still sinks K. Caps sit still while someone types into a field, and every cap on the page shares one pair of listeners.

Shortcut hints

Small caps sit in a line of text or down the side of a list. Press ⌘K and they go down with you.

Press ⌘K anywhere to open the command palette.

  • Command palette⌘K
  • Toggle sidebar⌘B
  • Find⌘F
page.tsxtsx
<p>
  Press <Keycap size="sm">⌘</Keycap> <Keycap size="sm">K</Keycap>{" "}
  anywhere to open the command palette.
</p>

Playing a shortcut back

pressed holds a cap down. Step through it to show a chord one key at a time.

⌘⇧P
page.tsxtsx
<Keycap size="lg" tone="ink" pressed={down >= 1}>⌘</Keycap>
<Keycap size="lg" tone="ink" pressed={down >= 2}>⇧</Keycap>
<Keycap size="lg" pressed={down >= 3}>P</Keycap>

Sizes, tones, and widths

Three sizes. Ink for modifiers, the blue key for the one that matters, and units for anything wider than a letter.

AAA
⌘ZReturn
page.tsxtsx
<Keycap size="sm">A</Keycap>
<Keycap>A</Keycap>
<Keycap size="lg">A</Keycap>

<Keycap tone="ink" units={1.25}>⌘</Keycap>
<Keycap>Z</Keycap>
<Keycap tone="key" units={1.75}>Return</Keycap>

A key with no legend

Nothing is printed on the space bar, so listen names its key.

page.tsxtsx
<Keycap units={6} listen=" ">{null}</Keycap>

API

It renders a kbd, and other props go to it. It goes down under a pointer too, but it isn't a button: put it inside one if a click should do something. With reduced motion it goes down and comes back up at once.

PropTypeDefaultDescription
childrenReactNodeThe legend. A text legend names the key the cap follows, symbols included: K follows K, ⌘ follows Command, Esc follows Escape.
listenstring | booleantrueThe key to follow, as a KeyboardEvent.key like "Enter" or " ". False stops the cap following the keyboard.
pressedbooleanfalseHolds the cap down, to show a shortcut or play one back.
unitsnumber1Width in key units. A letter is 1, Shift 2.25, the space bar 6.25.
size"sm" | "md" | "lg""md"Small caps sit in a line of text.
tone"chrome" | "ink" | "key""chrome"The plastic: silver, black, or the blue key.