Keyboard key

A keycap that shows a key or a keyboard shortcut.

ui.kbdcomponents/ui/kbd.tsx

Use case

For the AI

Use it to teach a shortcut where the person already looks: ⌘ K inside the search field, a key-hint footer (↵ to open, Esc to close), a tooltip naming a button's shortcut. Keys pressed together sit in one KbdGroup, one Kbd per key.

Use it when

A shortcut hint in a search field or a footer
A tooltip that names a button's shortcut
Help text that says which key to press

Use something else when

A shortcut on a dropdown menu's row (MenuShortcut): Dropdown menu
A shortcut on a command bar's row (CommandShortcut): Command bar
A status or a count: Badge

Examples

Esc⌘K⇧⌘P↵

Keycaps, alone and together

Code

Import

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

Usage

export function SearchHint() {
  return (
    <p className="flex items-center gap-1.5 text-[12.5px] text-ink-4">
      Press
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>K</Kbd>
      </KbdGroup>
      to search, <Kbd>Esc</Kbd> to close
    </p>
  )
}

Rules

It only shows a key: it is not pressable (pointer-events-none) and listens for nothing; the shortcut needs its own key handler.
One Kbd per key; keys pressed together go in one KbdGroup.
Write keys as their symbols or short names (⌘, ⇧, ↵, Esc) and letters in capitals.
Menu and command rows have their own shortcut slots; use those there, not a Kbd.