Keyboard keys as small raised key caps, alone or as a combination.
Kbd renders one key as a real <kbd>: a light fill, a hairline edge and a darker bottom lip so it reads as a key, not a badge. KbdGroup renders a chord (Ctrl + K) as a <kbd> wrapping one <kbd> per key, which is how HTML marks up a combination.
Use them in help text, menus, tooltips and command palettes. size="sm" fits inside a menu row or running text.
Installation
npx shadcn@latest add KezLahd/rime/kbdAlso installs: base.
Usage
import { Kbd, KbdGroup } from "@/components/ui";
<KbdGroup keys={["Ctrl", "K"]} />Examples
Keys and combinations
Press CtrlS to save the invoice.
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
Kbd
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "md" | sm sits inside menus and tooltips; md in running text. |
Also accepts the native attributes of AriaAttributes, DOMAttributes, HTMLAttributes.
KbdGroup
| Prop | Type | Default | Description |
|---|---|---|---|
| keysRequired | ReadonlyArray<string> | The keys pressed together, in order: ["Ctrl", "K"]. | |
| separator | ReactNode | "+" | Between the keys. Defaults to a muted "+". |
| size | "sm" | "md" | "md" | |
| className | string |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --kbd-bg | rgba(var(--rgb-white), 0.8) | … |
| --kbd-ink | var(--ink-secondary) | … |
| --kbd-radius | var(--r-2xs) | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --border-w | tokens.css | … |
| --font-body | tokens.css | … |
| --ink-muted | tokens.css | … |
| --ink-secondary | tokens.css | … |
| --line | tokens.css | … |
| --r-2xs | tokens.css | … |
| --rgb-brand-deep | tokens.css | … |
| --rgb-contact | tokens.css | … |
| --rgb-white | tokens.css | … |
| --text-caption | tokens.css | … |
| --text-micro | tokens.css | … |
Accessibility
- Real <kbd> elements, so the keys are read as text; the separator is hidden from assistive tech.
Do and don't
Do
- Name keys as they are printed: Ctrl, Shift, Enter, Esc.
Don't
- Don't use Kbd for anything that is not a key; that is a Badge.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open kbd.md