Kbd

Installation

Copy the source into your project with the CLI. It lands under @/components/ui and is yours to edit.

Usage

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

export default function Example() {
  return (
    <p>
      Press <Shortcut keys="mod+k" /> to search, or <Kbd>Esc</Kbd> to close.
    </p>
  );
}

Styling comes from the engine stylesheet and the nearest theme. Set it once at the root:

<html data-theme="graphite" data-mode="light">

HTML

The markup the example above renders, exactly. It needs no script: write it from any language or template.

<p>Press <kbd class="ml-shortcut"><kbd class="ml-kbd" aria-hidden="true">⌘</kbd><kbd class="ml-kbd" aria-hidden="true">K</kbd><span class="ml-visually-hidden">Command K</span></kbd> to search, or <kbd class="ml-kbd">Esc</kbd> to close.</p>

Classes and attributes

A class names each element; data-* and aria-* attributes carry its variant and state. The values listed are the ones the stylesheet draws; the default needs no attribute.

Accessibility and theming

• Semantic elements, accessible names and state relationships are part of the contract.
• Keyboard, pointer and touch paths are operable; focus stays visible in every theme.
• Light and dark modes pass WCAG AA contrast in all 5 canonical themes.
• Reduced motion and forced colors keep meaning and operation.