Import
import { Kbd, KbdGroup } from "@timelycare/helix-ui"
Props
interface KbdProps extends React.HTMLAttributes<HTMLElement> {
className?: string
children: React.ReactNode
}
interface KbdGroupProps extends React.HTMLAttributes<HTMLDivElement> {
className?: string
children: React.ReactNode
}
Styling
| Property | Value | Tailwind |
|---|---|---|
| Font | Adelle Sans Medium | font-medium |
| Font size | 12px | text-xs |
| Padding | 2px 6px | px-1.5 py-0.5 |
| Border radius | 6px | rounded-sm |
| Background | bg-muted | Muted surface color |
| Border | 1px solid | border border-border |
| Text color | text-muted-foreground | Subdued text |
| Shadow | Subtle inset | shadow-xs |
| Min width | 20px | min-w-5 |
| Text align | Center | text-center |
Variants
Kbd is a single-variant component. Visual consistency across all usages.
Common Patterns
Single Key
<Kbd>⌘</Kbd>
Key Combination
<KbdGroup>
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
</KbdGroup>
Modifier Keys
<KbdGroup>
<Kbd>⌘</Kbd>
<Kbd>⇧</Kbd>
<Kbd>⌥</Kbd>
<Kbd>⌃</Kbd>
</KbdGroup>
With Text Separator
<KbdGroup>
<Kbd>Ctrl</Kbd>
<span>+</span>
<Kbd>B</Kbd>
</KbdGroup>
In Tooltips
<TooltipContent>
Save <Kbd>⌘S</Kbd>
</TooltipContent>
In Command Palette
<CommandShortcut>
<KbdGroup>
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
</KbdGroup>
</CommandShortcut>
Accessibility
- Uses semantic
<kbd>HTML element for keyboard input - Screen readers announce content as keyboard input
- No interactive behavior; purely presentational
- Ensure sufficient color contrast between
text-muted-foregroundandbg-muted
Gotchas
| Problem | Solution |
|---|---|
| Keys run together without spacing | Use KbdGroup to add consistent gaps between keys |
| Symbol keys too small | Single-character keys use min-w-5 for consistent sizing |
| Kbd inside dark backgrounds hard to read | bg-muted and border-border adapt to dark mode automatically |
| Platform-specific symbols | Use ⌘ for Mac Command, Ctrl for Windows/Linux; consider detecting OS |
See Also
Last updated: February 19, 2026