Shortcut
Keyboard shortcut badges for documenting and displaying key combinations. Includes a standalone Key component for individual keys and a Shortcut wrapper for combos with configurable separators and RTL support.
Playground
Installation
pnpm add @tessinaui/uiUsage
import { Key, Shortcut } from "@tessinaui/ui";{/* Single key */}
<Key>Esc</Key>
{/* Shorthand — keys array */}
<Shortcut keys={["Ctrl", "K"]} />
<Shortcut keys={["Cmd", "Shift", "P"]} />
{/* Compound — children for custom compositions */}
<Shortcut>
<Key>Ctrl</Key>
<Key>K</Key>
</Shortcut>
{/* Mixed rounded per-key */}
<Shortcut>
<Key>Cmd</Key>
<Key rounded="full">⌘</Key>
</Shortcut>
{/* Rounded variant */}
<Shortcut keys={["Ctrl", "S"]} rounded="full" />
{/* Custom separator */}
<Shortcut keys={["Ctrl", "K"]} separator="then" />
{/* Size */}
<Shortcut keys={["Ctrl", "S"]} size="lg" />
{/* RTL */}
<Shortcut keys={["Ctrl", "Z"]} dir="rtl" />Examples
Default
A keyboard combination rendered from the keys array with auto-inserted separators.
Single Key
The standalone Key component for individual keys like Esc or Enter.
Sizes
Five sizes — xs, sm, md, lg, and xl.
Rounded
Border radius variants — none, sm, md, lg, and full.
Separators
Customize the character shown between keys with the separator prop.
Compound
Compose individual Key children for per-key control, like mixing rounded styles.
API Reference
Key props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Visual size of the key badge (inherits from parent Shortcut) |
rounded | "none" | "sm" | "md" | "lg" | "full" | "md" | Border radius (inherits from parent Shortcut) |
className | string | — | Additional CSS classes |
All native <kbd> HTML attributes are forwarded.
Shortcut props
| Prop | Type | Default | Description |
|---|---|---|---|
keys | string[] | — | Shorthand: array of key labels with auto-inserted separators |
children | ReactNode | — | Compound: Key components as children — separators auto-injected between them |
separator | string | "+" | Character(s) displayed between keys |
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Propagated to all child Key components via context |
rounded | "none" | "sm" | "md" | "lg" | "full" | "md" | Propagated to all child Key components via context |
dir | "ltr" | "rtl" | "ltr" | Text direction for RTL layouts |
className | string | — | Additional CSS classes |
children takes precedence over keys when both are provided. All native <span> HTML attributes are forwarded.
Select
Keyboard-accessible dropdown select with intent variants, sizes, grouped options, leading icons, item descriptions, and label position options.
Sidebar
A composable, accessible sidebar shell for app layouts. Desktop and mobile modes, three variants (inset, floating, classic), collapsible to icon rail or off-canvas, keyboard shortcut toggle, LTR and RTL. Built on Base UI Collapsible with a full compound-component API.