Keyboard key

Key caps and keyboard chords for shortcut hints.

Primitive · content

Install

npx shadcn@latest add https://ndigo.dev/r/kbd.json

To use the shorter @ndigo/kbd form, configure the namespace in components.json.

Files

Source	Target	Type
registry/ui/kbd/nd-kbd.css	@ui/nd-kbd/nd-kbd.css	registry:file

Live example

See this component rendered live on the live examples page.

Dependencies

None.

Documentation

Usage

<p>Press <kbd class="nd-kbd">Ctrl</kbd> + <kbd class="nd-kbd">K</kbd> to search.</p>

<span class="nd-kbd-group">
    <kbd class="nd-kbd">⌘</kbd>
    <kbd class="nd-kbd">K</kbd>
</span>

Accessibility

<kbd> is the native element for user input; keep it. Do not use the key cap as a button or shortcut handler — pair it with the real control. The visual spacing in a chord is decorative; the surrounding sentence should explain the shortcut.

Styling

Import nd-kbd.css after the tokens. The cap uses the raised surface, border, and monospace font; the bottom border is thicker to read as a physical key.