Kbd

The keyboard-shortcut chip. A single presentational primitive for the shortcut hints used in search fields, command inputs, the command palette, and the top nav.

Included in the single kansho full pack. Components are not offered as separate installs.

Single keys

Symbols and short labels

⌘K↵esc↑↓⇧/

In context

How the chip reads inside supporting copy

Press ⌘K to open the command palette, then ↑↓ to move and ↵ to run the highlighted command.

Inside a control

Trailing hint on a search trigger

Usage

Guidance

Use one chip per key; render a combination as adjacent chips.
Keep labels short — symbols or two or three letters.

Don't

Wire behaviour onto the chip — it is presentational; wrap it in a real button when clickable.
Pack a whole shortcut string into a single chip.

When to use: Shortcut hints in fields, menus, the command palette, and nav.
When not to: Interactive controls — Kbd carries no key handling of its own.

Props

API reference

Prop	Type	Description
childrenrequired	ReactNode	The key symbol or label to display.
...HTMLAttributes	kbd props	All native attributes of a <kbd> element, plus className.

Component documentation

Kbd

components/ui/kbd.tsx

Purpose

Displays a concise keyboard-key or shortcut hint.

Appropriate use

Use beside controls to advertise an available shortcut, never as the control itself.

Example

components/ui/kbd.tsx has a representative live example in the "Single keys" section on /components/kbd.

States

Meaningful visual states are single-key and multi-key textual compositions; it has no interactive or disabled state.

API and props

Kbd extends native HTMLElement attributes with className and ref.

Dependencies

React and the Kansho cn utility.

Accessibility

Renders semantic kbd text in normal reading order and does not capture keyboard input.

Limitations

It only describes a shortcut; the surrounding feature must implement and document the actual key handler.

Source

Source: components/ui/kbd.tsx.

Full pack

components/ui/kbd.tsx is documented at /components/kbd and installs only through the single Kansho full pack; no individual component install is offered.