Kbd

Kbd displays individual keys or short keyboard shortcuts without replacing explanatory help.

Purpose

Kbd displays individual keys or short keyboard shortcuts. It supplements, but never replaces, an accessible action label or help text.

Shortcut keys

Esc⌘KShift?

import { Kbd, KbdGroup } from "@/components/ui/kbd";

export function Example() {
  return <KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup>;
}

Installation

With the Siteplane registry alias configured, add the component and import the installed source from your app.

CLI

pnpm dlx shadcn@4.16.1 add @siteplane/kbd

Import

import { Kbd, KbdGroup } from "@/components/ui/kbd";

Need the machine-readable source metadata? View registry JSON.

Usage

Kbd displays keyboard shortcuts inline. Use KbdGroup when multiple keys form one command.

import { Kbd, KbdGroup } from "@/components/ui/kbd";

export function Example() {
  return <KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup>;
}

Examples

Single keys, grouped combinations and input shortcut hints compose from the same primitive.

Single keys

KCmdCtrlShift

<Kbd>K</Kbd>
<Kbd>Cmd</Kbd>
<Kbd>Ctrl</Kbd>
<Kbd>Shift</Kbd>

Key combinations

CmdKCmdShiftPCtrlAltDelete

<KbdGroup aria-label="Command K">
  <Kbd>Cmd</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>
<KbdGroup aria-label="Command Shift P">
  <Kbd>Cmd</Kbd>
  <Kbd>Shift</Kbd>
  <Kbd>P</Kbd>
</KbdGroup>
<KbdGroup aria-label="Control Alt Delete">
  <Kbd>Ctrl</Kbd>
  <Kbd>Alt</Kbd>
  <Kbd>Delete</Kbd>
</KbdGroup>

In input group

Kbd works as a shortcut hint inside an InputGroup addon.

Cmd K

<InputGroup>
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
  <InputGroupInput aria-label="Search command" placeholder="Search..." type="search" />
  <InputGroupAddon align="inline-end">
    <Kbd>Cmd K</Kbd>
  </InputGroupAddon>
</InputGroup>

API Reference

The reference lists the source-owned exports and props that are easy to miss in visual examples. Inherited Base UI props remain available unless the wrapper narrows them.

Use Kbd for one key and KbdGroup for a short combination.
Kbd is non-interactive and keeps pointer-events-none.
Native no-wrap and shrink protection keeps combinations such as “⌘ K” together in compact layouts.
Kbd may appear as supporting content inside an Input Group addon.

Motion

Component motion uses the shared Siteplane motion contract. See the global motion guide for provider setup, tokens and reduced-motion behavior.

Kbd is static and has no reduced-motion exception.
Keep radius, size, and typography on the native primitive.

Accessibility

A shortcut hint does not replace the accessible name of its action.
Keep combinations short and explain unfamiliar shortcuts in surrounding text.
An Input with a Kbd addon still needs a visible or accessible label.
Do not build dense shortcut reference walls inside compact product surfaces.

Implementation Guidance

Use KbdGroup instead of custom separators and spacing for combinations.
Preserve native slots, no-wrap, shrink, and pointer behavior.
Keep complete shortcut documentation in help content rather than the control.