Kbd

Display keyboard keys and chords in docs, tooltips, buttons, and search fields. Non-interactive — pointer-events-none.

Basic

Render a single key or chord with Kbd.

Installation

CLI

npx @sonojs/ui@latest add kbd

Composition

structure

Kbd

KbdGroup
├── Kbd
└── Kbd

Usage

kbd.tsx

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

export function Example() {
  return (
    <p className="flex flex-wrap items-center gap-1 text-sm text-muted-foreground">
      Press{" "}
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <Kbd>K</Kbd>
      </KbdGroup>{" "}
      to search.
    </p>
  )
}

Props

Prop	Type	Default	Description
className	string	—	On `Kbd` or `KbdGroup` — merge extra Tailwind classes.
…kbd props	React.ComponentProps<"kbd">	—	Native attributes pass through to the element.