Skip to content
rdloom

Kbd

Shows a keyboard key or shortcut, like Ctrl or ⌘K, in a keycap style. Not interactive.

Displayv0.1.0experimentalWCAG 2.2 AAView spec
EscEnterTab
import { Kbd } from "@rdloom/react";

export default function KbdBasicExample() {
  return (
    <div className="flex items-center gap-2">
      <Kbd>Esc</Kbd>
      <Kbd>Enter</Kbd>
      <Kbd>Tab</Kbd>
    </div>
  );
}

Installation

npx rdloom add kbd

Copies the source into src/components/rdloom. Edit it freely: rdloom upgrade merges later versions into your changes.

Use another registry client
npx shadcn@latest add https://rdloom.vimalbhatt.com/r/kbd.json

Works, but without upgrade tracking.

Usage

import { Kbd } from "@rdloom/react";

<div className="flex items-center gap-2">
  <Kbd>Esc</Kbd>
  <Kbd>Enter</Kbd>
  <Kbd>Tab</Kbd>
</div>

Chord

Ctrl+Shift+P
import { Kbd } from "@rdloom/react";

// One Kbd per key; the plus signs are plain text.
export default function KbdChordExample() {
  return (
    <div className="flex items-center gap-1 text-sm text-[var(--rd-color-text-muted)]">
      <Kbd>Ctrl</Kbd>+<Kbd>Shift</Kbd>+<Kbd>P</Kbd>
    </div>
  );
}

In text

Press ? anywhere to see every shortcut, or Esc to close this panel.

import { Kbd } from "@rdloom/react";

export default function KbdInTextExample() {
  return (
    <p className="max-w-sm text-sm">
      Press <Kbd size="sm">?</Kbd> anywhere to see every shortcut, or <Kbd size="sm">Esc</Kbd> to close this panel.
    </p>
  );
}

API Reference

Defined by the spec. Components also accept the props of the React Aria component they wrap.

PropTypeDefault
childrenrequired

The key or keys, e.g. "Esc", "⌘" or "Ctrl". For a chord, use one Kbd per key.

nodenone
size

Keycap size.

"sm" | "md""md"

Accessibility

Role text, WCAG 2.2 AA. Tested with axe and keyboard tests; screen reader checks are in the audit checklist.

Keyboard

Not interactive.

Screen readers announce

  • Read as inline text, e.g. "Press Control K"

What your code must do

  • Rendered with the kbd element, so assistive technology knows it is keyboard input
  • Symbols like ⌘ and ⌥ are not read consistently: write the key name in an aria-label or beside it when it matters
  • Text meets 4.5:1 against the keycap

Guidelines

Use it when

  • Documenting shortcuts
  • Hints inside menus, tooltips and the command palette

Avoid it when

  • Anything clickable: use a Button
  • Code: use a code element

Don't

  • Showing only Mac symbols to everyone
  • Relying on the shortcut being visible as the only way to find a feature

Design tokens

The semantic tokens this component uses. Change them once and every component follows; see Design tokens.

  • --rd-color-surface-subtle
  • --rd-color-border-default
  • --rd-color-border-strong
  • --rd-color-text-default
  • --rd-color-text-muted
  • --rd-radius-control