A <kbd> fragment set in the mono face on a raised, bordered key cap — the physical-keycap sibling of Inline Code. Sized xs–xl so a shortcut tracks the surrounding text; data-density scales each size further.
primitiv add kbd installs it whichever mode you are reading.Preview
import { Kbd } from "@/components/ui/kbd";
<Kbd size="md">Esc</Kbd>Density is set by a data-density ancestor — the Context system, not a Kbd prop.
npx primitiv add kbdpnpm dlx primitiv add kbdyarn dlx primitiv add kbdbunx primitiv add kbdImport
import { Kbd } from "@/components/ui/kbd";No headless primitive — this one ships only as a copied styled surface, so primitiv add is the only way in, whichever mode you are reading.
Extends HTMLElement — every native attribute of that element is accepted and forwarded.
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | — | Render the single child element instead of a wrapping <kbd>, merging
the kbd classes onto it — e.g. <Kbd asChild><span>...</span></Kbd>. |
| size | "xs" | "sm" | "md" | "lg" | "xl" | md | Key-cap size; data-density scales each size further. |
--primitiv-kbd-font-family--primitiv-kbd-font-size--primitiv-kbd-font-weight--primitiv-kbd-line-height--primitiv-kbd-color--primitiv-kbd-background--primitiv-kbd-border-color--primitiv-kbd-border-width--primitiv-kbd-radius--primitiv-kbd-padding-inline--primitiv-kbd-padding-block<kbd> element, so assistive tech announces it as keyboard input rather than as plain text — the semantics come for free from the right element.Kbd and keep the + joiner outside them: a screen reader then reads the keys individually instead of spelling out one run-together string.<kbd> naming a key is not itself a control. The actual keyboard handling lives on the component the shortcut drives.A <kbd> fragment styled as a raised key cap. Use it for the name of a single key — Esc, Enter, Tab — anywhere you refer to a keystroke in running text or a shortcuts list.
import { Kbd } from "@/components/ui/kbd";
<Kbd>Esc</Kbd><Kbd>Enter</Kbd>A combination is separate Kbds joined by a plain +, not one Kbd with the whole string — each physical key is its own cap, and a screen reader announces them one at a time. Keep the joiner (+ or a thin space) outside the caps.
import { Kbd } from "@/components/ui/kbd";
<span> <Kbd>⌘</Kbd> + <Kbd>K</Kbd></span>Kbd sizes off the text around it, so a key named mid-sentence sits on the line without disturbing it. Reach for Kbd when the thing is a key to press; for a literal value or a command, that is InlineCode.
Press / to focus the search field, or Esc to close it.
import { Kbd } from "@/components/ui/kbd";
<p> Press <Kbd size="sm">/</Kbd> to focus the search field.</p>