Kbd

A keyboard key.

Press ⌘ K to search, or Esc to close.

When to use

Use when: Showing a keyboard shortcut or key in text or menus.
Avoid when: The text is code; use a code element.

Installation

bunx shelf add kbd

The source lands in src/components/ui/kbd.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

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

<Kbd />

Built on

Packages: @stylexjs/stylex
Shelf items: foundations, utils
Figma: In progress. See Designers and Figma.