Kbd

A keyboard input display primitive for shortcuts and key labels.

Features

Native keyboard input semantics
Shortcut grouping
asChild composition
No package-owned data attributes
Headless styling

Installation

npm install @ariaui/kbd

Examples

Kbd examples show shortcut keycaps as plain headless primitives. Use Kbd.Root for each key label and Kbd.Group when multiple keys belong to the same shortcut.

Shortcut group

Group related key labels into a single shortcut while keeping each key as a native kbd element.

Preview

No preview output yet.

live.tsxReady

Inline

Place keycaps inline with command copy so shortcut hints stay close to the action they explain.

Preview

No preview output yet.

live.tsxReady

Anatomy

tsx

import * as Kbd from "@ariaui/kbd";

export default function Example() {
  return (
    <Kbd.Group>
      <Kbd.Root>Ctrl</Kbd.Root>
      <Kbd.Root>K</Kbd.Root>
    </Kbd.Group>
  );
}

API Reference

Root

Keyboard key primitive. Renders a native `<kbd>` by default, forwards native props, and supports `asChild` composition.

Prop	Type	Default
asChild	boolean	false

Group

Neutral shortcut grouping primitive. Renders a `<span>` by default and groups related key labels without adding semantics.

Prop	Type	Default
asChild	boolean	false

Accessibility

Kbd.Root renders a native <kbd> by default, so browser keyboard-input semantics apply.

Use short labels such as Ctrl, ⌘, Esc, or Enter.
Use Kbd.Group to keep related key labels together.
Add aria-label to a group when symbols or abbreviations need a clearer spoken label.
Do not use keycaps as the only way to explain an action; keep surrounding copy readable.

Shortcut labels

Keyboard shortcuts can differ by platform. Use labels that match the user-facing command model in your app, and provide platform-specific copy when needed.