Skip to main content
Kbd (keyboard hint) preview (light)
  • Location: sabo/src/components/ui/kbd.tsx

​
When to use

  • Show keyboard shortcuts inline with labels, menus, or tooltips.
  • Make shortcuts scannable with concise keys (e.g., ⌘K, Ctrl+P).

​
Usage

sabo/src/components/ui/kbd.tsx
import { Kbd, KbdGroup } from "@/components/ui/kbd";

export function Example() {
  return (
    <KbdGroup>
      <Kbd>⌘</Kbd>
      <Kbd>K</Kbd>
    </KbdGroup>
  );
}

​
Key props

​
className
string
Use to adjust size (text-xs → text-sm), spacing, or colors.

​
Styling tip

  • Keep contrast high and size small; KBD is a hint, not a button.
  • Group related keys with KbdGroup.

​
Accessibility

  • Pair with descriptive text (“Search”) or tooltips to clarify purpose.