ComponentsEssentials
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" />Showcase
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.
Chip
Interactive label pills for filtering, tagging, and selection. Four variants, five intents, five sizes, six rounded options, optional remove button, leading icon/avatar/status slots, and RTL support.
Skeleton
Animated placeholder for loading states. Wave shimmer (default) and pulse variants, five rounded options, and composable with any layout.