Kbd · 0nlyType

Example

Press G anywhere to lay the grid over the page, or ⌘K to find another.

Type the note in, A to G, then ⌘⇧S to save it under a new name.

RestG

PressedG

Two glyphs⌘K

Two glyphs, pressed⌘K

TypewriterG

Typewriter, pressedG

Typewriter, a wordEsc

Chord⌘⇧S

Chord, pressed⌘⇧S

Chord, in wordsCtrlShiftS

Install

Run it in a project that has the shadcn CLI set up. It brings the 0nlyType base along.

npmpnpmyarnbun

npx shadcn@latest add https://thedirectors.agency/ui/r/kbd.json

Usage

kbd-example.tsx

import { Kbd } from "@/components/ui/kbd"export default function Example() {return (<div className="grid gap-8"><p className="ot-mp">Press <Kbd>G</Kbd> anywhere to lay the grid over the page, or <Kbd>⌘K</Kbd> to find another.</p><p className="ot-mp">Type the note in, <Kbd variant="typewriter">A</Kbd> to <Kbd variant="typewriter">G</Kbd>, then <Kbd variant="chord">⌘⇧S</Kbd> tosave it under a new name.</p></div>)}

Contract

Underneath: native <kbd>. Its CSS lives in base.css, so every item may use it.
A key, drawn as the corners of its cap (the corner marks the statement button and the dialog wear), with room inside for its name, on the text's baseline. data-pressed presses it: the corners run together into the whole cap and ink in, and the key goes down a little (the specimen presses the G key along with your keyboard).
A key is its own left-to-right run (direction: ltr; unicode-bidi: isolate), so ⌘K reads ⌘K on a right-to-left page too.
data-variant="typewriter": after the round keys of the machine Weingart's letter was typed on, and the dot calendar's discs. The key is a hairline ring (an ellipse for a word such as Esc). Pressed, it inks into a disc with the letter reversed out of it in paper, goes down and lands with one small rebound. Forced colours draw it in CanvasText and reverse it to Canvas.
data-variant="chord": after the figured bass, where the notes to play with the bass are stacked small beside it. Given a combination as a string (⌘⇧S, or Ctrl+Shift+S), the key stands a little larger and its modifiers stack small before it, in graphite, in one cap: keys held together, read as one. The text keeps its order, so it is read as written. Pressed, the cap closes and the figures ink.

Props

Props of Kbd
Prop	Type	Default	What it does
`pressed`	`boolean`	`false`	Draw the key pressed, for when your code listens for it.
`variant`	`"typewriter" \| "chord"`		typewriter draws the key as a round typewriter key: a ring that, pressed, inks into a disc with the letter reversed out of it. chord takes a combination as a string ("⌘⇧S" or "Ctrl+Shift+S") and stacks its modifiers small before the key, like the figures over a bass note.
`children`	`ReactNode`		The key's name. Always read left to right, on a right-to-left page too.

Craft

Where its move comes from

Where its move comes from
Component	Reference	Move
Key	"the silence that heals" corners	A key drawn as the corners of its cap
Typewriter key	Weingart's typed letter; "28 December" dots	A ring that inks into a disc, the letter reversed out
Chord key	The figured bass	Modifiers stacked small beside the key, in one cap

How it moves

How it moves
Component	Articulation	What moves
Key	Press	The corners close and the cap goes down with your key
Typewriter key	Spiccato	Pressed, the ring inks into a disc, goes down and lands with one small rebound