Kbd
Keyboard key + shortcut renderer. Platform-aware `mod` glyph, built-in modifier/arrow/enter aliases, outlined + soft variants.
Preview
Installation
Install the individual package:
$ pnpm add @sisyphos-ui/kbd @sisyphos-ui/coreOr use the umbrella package that bundles everything:
$ pnpm add @sisyphos-ui/uiUsage
Import the component styles and the component itself:
import "@sisyphos-ui/kbd/styles.css";
import { Kbd } from "@sisyphos-ui/kbd";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.