Kbd

A keyboard key or shortcut, styled to sit in text, menus, buttons and tooltips.

npx prodular-ui add kbd

Shortcuts

Group the keys of one shortcut with KbdGroup.

Search: ⌘K
New invoice: C
Go to customers: GC
Toggle sidebar: ⌘B
Ask AI: ⌘J

import { Kbd, KbdGroup } from "@/components/ui/kbd"
const shortcuts = [  { label: "Search", keys: ["⌘", "K"] },  { label: "New invoice", keys: ["C"] },  { label: "Go to customers", keys: ["G", "C"] },  { label: "Toggle sidebar", keys: ["⌘", "B"] },  { label: "Ask AI", keys: ["⌘", "J"] },]
export default function KbdDefault() {  return (    <dl className="flex w-full max-w-xs flex-col divide-y">      {shortcuts.map((s) => (        <div key={s.label} className="flex items-center justify-between py-2.5 first:pt-0 last:pb-0">          <dt className="text-sm">{s.label}</dt>          <dd>            <KbdGroup>              {s.keys.map((k) => (                <Kbd key={k}>{k}</Kbd>              ))}            </KbdGroup>          </dd>        </div>      ))}    </dl>  )}

In buttons and text

Adapts to solid buttons and tooltips. Push it right with ml-auto.

Press Esc to close the panel.

import { SearchIcon } from "lucide-react"
import { Button } from "@/components/ui/button"import { Kbd } from "@/components/ui/kbd"
export default function KbdInButton() {  return (    <div className="flex flex-wrap items-center justify-center gap-3">      <Button variant="outline" className="w-56 justify-start text-muted-foreground">        <SearchIcon data-icon="inline-start" />        Search customers        <Kbd className="ml-auto">⌘K</Kbd>      </Button>      <Button>        Send invoice        <Kbd>⌘↵</Kbd>      </Button>      <p className="w-full text-center text-[13px] text-muted-foreground">        Press <Kbd>Esc</Kbd> to close the panel.      </p>    </div>  )}

Anatomy

<KbdGroup>  <Kbd>⌘</Kbd>  <Kbd>K</Kbd></KbdGroup>

Guidance

Use it when

Teaching shortcuts next to the action they trigger: search fields, menu items, tooltips.
Help pages that list shortcuts.

Avoid

Shortcuts that do not exist on the current platform. Show Ctrl on Windows and Linux.
Code or values. Use inline code for those.

Rules for AI agents

Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.

Use symbols for modifier keys on macOS (⌘, ⌥, ⇧, ⌃) and words elsewhere (Ctrl, Alt, Shift).
Wrap multi key shortcuts in KbdGroup, one Kbd per key. A compact shortcut inside a button can be a single Kbd, such as ⌘K.
Inside a Button, place Kbd last and add ml-auto when the button is wider than its label.
Never use Kbd as a clickable element. It has pointer-events-none.
Use variant="mono" when keys sit next to monospace readouts; HotkeyKeys renders mono keys for registered shortcuts.

API

Kbd

Prop	Type	Default	Description
children	ReactNode		A key name or symbol: ⌘, ⇧, ↵, Esc, K.
variant	"default" \| "mono"	"default"	mono sets the key in the monospace face, next to other technical readouts.

KbdGroup

Prop	Type	Default	Description
children	ReactNode		Several Kbd elements that make up one shortcut.

Installation

The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.

npx prodular-ui add kbd# or, with the registry in components.jsonnpx shadcn@latest add @prodular/kbd

Kbd