Kbd

A key or a shortcut, in the village's mono face: for menus, tooltips and the command palette.

Installation

npx rasengan-ui add kbd

Or with the shadcn CLI, from the registry:

npx shadcn@latest add https://ui.rasengan.dev/r/base/kbd.json

Usage

import { Kbd, KbdGroup } from "@/components/ui/kbd";
 
export function Usage() {
  return (
    <p>
      Press{" "}
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <Kbd>K</Kbd>
      </KbdGroup>{" "}
      to search.
    </p>
  );
}

Sizes, and in a tooltip

size="sm" fits menus and tooltips. In the default tooltip, which is inverted, the key turns into a wash of the tooltip's ink so it still reads on the dark surface.

Villages

The key takes the village's border width and small radius: thin and rounded in Konoha, square with a heavy edge in Iwa.

Accessibility

• A <kbd>, which screen readers read as text. Spell keys the way people say them (Ctrl, Enter), or give the group an aria-label when you use symbols such as ⌘.
• When the shortcut repeats a label that is already read (a button's name), hide it with aria-hidden.

API reference

Kbd and KbdGroup, each a <kbd> taking its props and className. Kbd also takes:

kbdVariants({ size }) returns the key's classes.