ui/components/kbd

Kbd

Keyboard key indicator rendered as an inline kbd element with terminal styling.

size="sm" renders 10px type — a dense desktop-legend size. On mobile/touch surfaces keep the default size="md".

Preview

tsx

1 import { Kbd } from "@/components/ui/kbd";2 3 export default function KbdDefault() {4   return (5     <div className="flex flex-wrap items-center gap-3">6       <Kbd>Esc</Kbd>7       <Kbd>Enter</Kbd>8       <Kbd>Shift</Kbd>9       <Kbd>Tab</Kbd>10       <Kbd>Ctrl</Kbd>11     </div>12   );13 }14

Installation

$pnpm exec dgadd add ui/kbd

[Installs to]src/components/ui/kbd[Item]ui/kbd

dgadd is not public on npm yet. Until the first release, pack @diffgazer/add from the repository and install that tarball into this app, which is what puts dgadd on pnpm exec.

UI components require Tailwind CSS v4. Local copy mode imports src/styles/styles.css; package mode uses @diffgazer/ui CSS once packages are available.

Usage

tsx

1 import { Kbd } from "@/components/ui/kbd";2 3 export default function KbdDefault() {4   return (5     <div className="flex flex-wrap items-center gap-3">6       <Kbd>Esc</Kbd>7       <Kbd>Enter</Kbd>8       <Kbd>Shift</Kbd>9       <Kbd>Tab</Kbd>10       <Kbd>Ctrl</Kbd>11     </div>12   );13 }14

Examples

Sizes

Preview

tsx

1 import { Kbd } from "@/components/ui/kbd";2 3 export default function KbdSizes() {4   return (5     <div className="flex flex-wrap items-center gap-3">6       <Kbd size="sm">sm</Kbd>7       <Kbd size="md">md</Kbd>8     </div>9   );10 }11

Inline

Preview

tsx

1 import { Kbd } from "@/components/ui/kbd";2 3 export default function KbdInline() {4   return (5     <p className="text-sm text-muted-foreground">6       Press <Kbd>Esc</Kbd> to close the dialog, or <Kbd>Enter</Kbd> to confirm.7     </p>8   );9 }10

Group

Preview

tsx

1 import { Kbd, KbdGroup } from "@/components/ui/kbd";2 3 /**4  * Two deliberate chord grammars. Platform chords (macOS modifier glyphs) sit5  * adjacent with no separator; spelled-out chords use a dimmed `+`. Pick one per6  * surface and keep it — the demo labels both so the choice reads as intentional.7  */8 export default function KbdGroupExample() {9   return (10     <div className="flex flex-col gap-4">11       <div className="flex flex-col gap-1.5">12         <span className="text-2xs uppercase tracking-wider text-muted-foreground">13           Platform chord14         </span>15         <KbdGroup aria-label="Command K">16           <Kbd>⌘</Kbd>17           <Kbd>K</Kbd>18         </KbdGroup>19       </div>20       <div className="flex flex-col gap-1.5">21         <span className="text-2xs uppercase tracking-wider text-muted-foreground">22           Spelled-out chord23         </span>24         <KbdGroup aria-label="Control Shift P">25           <Kbd>Ctrl</Kbd>26           <span aria-hidden="true" className="text-muted-foreground text-xs">27             +28           </span>29           <Kbd>Shift</Kbd>30           <span aria-hidden="true" className="text-muted-foreground text-xs">31             +32           </span>33           <Kbd>P</Kbd>34         </KbdGroup>35       </div>36     </div>37   );38 }39

API Reference

Kbd

Name	Type	Default	Description
size	"sm" \| "md"	"md"	Padding and font-size token applied to the kbd glyph.
variant	"default" \| "inverse"	"default"	Surface the cap is painted for: default (page background) or inverse (a --foreground bar).
children	ReactNode	—	Key glyph or short label rendered inside the <kbd> element.

KbdGroup

Name	Type	Default	Description
children	ReactNode	—	Sequence of Kbd children rendered inline with a small gap.

Accessibility

Notes

Size Variants

Available in sm and md sizes (defaults to md). Renders inline, designed for use inside text.

Terminal Styling

Rendered with a hairline border and a translucent --foreground fill so the key cap carries the same inline weight in light and dark palettes.

Inverse surfaces

Use `variant="inverse"` for caps on a bar painted in --foreground (shortcut legends, app footers). It mirrors the same border/fill recipe against --background, so the cap keeps its weight instead of disappearing into the inverted bar.

Chord Grammar

Two grammars are supported and should not be mixed on one surface: platform chords place modifier glyphs adjacent with no separator (Command K), spelled-out chords use a dimmed + between caps (Ctrl + Shift + P). Wrap either in KbdGroup and give the group an aria-label so assistive tech announces the whole shortcut.

Source

Install via CLI: pnpm exec dgadd add ui/kbd.

Highlighted source loads after this disclosure opens. Browse the source repository.

Kbd

Installation

Usage

Examples

Sizes

Inline

Group

API Reference

Kbd

KbdGroup

Accessibility

Notes

Size Variants

Terminal Styling

Inverse surfaces

Chord Grammar

Source

View component source (7 files)