Kbd
Displays textual user input from the keyboard — one key chip, and a group that keeps a whole shortcut together.
- Status
- Since
0.1.0- Accessibility pattern
- native kbd element
Last updated
Install
Configure registry credentials first using the Quickstart. Before copying this item or any transitive registry dependency, verify the signed manifest and save the exact bytes for Kbd before installation. Retain the digest printed by this command.
pnpm exec vegastack-design verify kbdInstall with the pinned shadcn CLI. Bare shadcn does not verify VegaStack signature or integrity.
pnpm dlx shadcn@4.21.0 add @vegastack/kbdRun the exact offline --post-write command printed by the preflight, using its saved item path and independently retained --expected-integrity digest. Use the saved preflight for every transitive registry dependency too; stop on any mismatch before using the components.
Usage
import { Kbd, KbdGroup } from "@/components/ui/kbd";
<Kbd>Ctrl</Kbd>;Anatomy
Examples
Composition
Kbd is one key. KbdGroup holds a sequence of them — either the keys of a single chord, or two
alternative shortcuts side by side.
Group
Use the KbdGroup component to group keyboard keys together.
Use Ctrl + BCtrl + K to open the command palette
Button
Use Kbd inside a Button to show the shortcut that fires the same action. Give it
data-icon="inline-end" so it takes the trailing icon spacing.
Tooltip
You can use Kbd inside a TooltipContent to show the shortcut beside the label. Inside a tooltip
the chip inverts automatically — it reads the tooltip surface through in-data-[slot=tooltip-content]
rather than needing a variant.
Input Group
The chip goes in an InputGroup's
InputGroupAddon align="inline-end", which holds it inside the field chrome without putting it in
the editable box.
RTL
Kbd is a chip with symmetric padding and KbdGroup is a flex row, so a right-to-left document
mirrors the order of a chord without any extra work.
API Reference
Kbd
Kbd adds no props of its own — it accepts everything the underlying element or Base UI primitive accepts (className, ref, ARIA attributes, event handlers).
KbdGroup
KbdGroup adds no props of its own — it accepts everything the underlying element or Base UI primitive accepts (className, ref, ARIA attributes, event handlers).
Accessibility
- Renders a native
kbdelement, which is what assistive technology expects for keyboard input.KbdGroupis akbdtoo, so a chord reads as one piece of keyboard input. - The chip is
pointer-events-noneandselect-none: it is a label for a shortcut, never the control that fires it. Put the shortcut on a real button or a key handler. - A symbol on its own —
⌘,⇧,⏎— is not read aloud usefully by every screen reader. When the shortcut is the only way to reach an action, spell it out in the surrounding sentence as well. - Inside a tooltip the chip inverts to stay legible against the inverted surface, which keeps it above the AA contrast floor in both themes.
| Contract | States tested |
|---|---|
| Behaviour | default |
| Accessibility | native-or-base-ui-semantics, browser-accessibility-test |
| Visual | default |
Do / Don't
Deviations
Upstream's file plus packages/ui/upstream/patches/kbd.patch. Every hunk:
- DOC-2 —
cnis imported from@vegastack/design.
Nothing else. Both class strings and both parts are upstream's, byte for byte; the remaining diff is the repository formatter reflowing the file.