Kbd
Keyboard key + shortcut renderer. Platform-aware `mod` glyph, built-in modifier/arrow/enter aliases, outlined + soft variants.
Preview
Switch the framework picker (top-right of the panel) to render the same demo live in React, Vue, or Angular — same class names, ARIA, and visual output across all three.
Installation
Sisyphos UI ships unified packages for React, Vue, and Angular. Pick the one that matches your stack — every framework exports the same component classes, ARIA semantics, and CSS tokens.
$ pnpm add @sisyphos-ui/reactThen import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";
Usage
import { Kbd } from "@sisyphos-ui/react";
export const QuickOpen = () => <Kbd shortcut="cmd+k" />;Shortcut string
Parsed on `+` and whitespace. Modifier aliases (`cmd`, `ctrl`, `shift`, …) map to glyphs; `mod` resolves to ⌘ on macOS and ⌃ elsewhere.
Visible separator
`separator` accepts any `ReactNode` — a plus, a dot, a custom divider — rendered between each key.
Variants
`outlined` (default) has a border and light shadow; `soft` sits on a muted fill.
Sizes
Scales via font-size; chip padding follows in `em`.
In prose
Drop `<Kbd>` into a paragraph — `vertical-align: middle` keeps it on the text baseline.
Press ⌘K to open the command menu, or Esc to dismiss it.
API
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "outlined" | "soft" | "outlined" | Chip style. |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "sm" | Size scale. |
| children | ReactNode | — | Free-form content; rendered inside a single `<kbd>`. |
| keys | string[] | — | Explicit list of keys. Aliases normalized to glyphs. |
| shortcut | string | — | Shortcut string split on `+` and whitespace (e.g. `"cmd+k"`). |
| separator | ReactNode | — | Rendered between keys. Omit to join them visually. |
The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README on npm.