Stepwise UI

Kbd

A keyboard key cap. Pass a single child, or a keys array to render a multi-key chord.

Installation

npx stepwise-ui add kbd

Default

EscEnter
import { Kbd } from '@/components/stepwise/kbd'

<Kbd keys={['⌘', 'K']} />
<Kbd keys={['⌘', '⇧', 'P']} />
<Kbd>Esc</Kbd>

Inline

Press to open the command palette, or / to search.

Press <Kbd keys={['⌘', 'K']} /> to open the command palette.

Props

PropTypeDescription
keys
string[]
Render each key in its own cap with a thin gap.
children
ReactNode
A single key - used when keys is omitted.
className
string
Merged onto the cap (or wrapper for keys).