Skip to content
Aback UI

Foundation

Kbd

A keycap for documenting shortcuts.

StableUsed in Aback Tools, Aback LaunchRegistry JSON (opens in a new tab)
Open search
CtrlK
Save changes
CtrlS
Close dialog
Esc

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add kbd

Writes components/ui/kbd.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Usage

Import the parts you need from the installed file. The Code tab above has a complete, working example.

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

API reference

Props and composition points for Kbd. Native element props pass through.

PropTypeDefaultDescription
childrenReactNodeNoneThe key label, such as Ctrl, K, or Esc.
classNamestringNoneLayout adjustments only.

Dependencies: no extra packages, plus the shared @/lib/utils helper.

Accessibility

Semantics, keyboard behavior, and the decisions that keep the component operable.

  • Renders a real kbd element so assistive technology can identify it.
  • Always state what the shortcut does in adjacent visible text.
  • Do not rely on the keycap alone to communicate an action.
  • Mark decorative keycaps aria-hidden when they only repeat visible text.

Used in production

The Aback products whose interfaces shaped this component.

Related