> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Kbd

> Keyboard key hint for shortcuts.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/AI-6KNJJN4jkkZTo/images/ui/kbd-light.png?fit=max&auto=format&n=AI-6KNJJN4jkkZTo&q=85&s=a2b68557373b9d8a7fa207d35ea1701f" alt="Kbd (keyboard hint) preview (light)" width="240" data-path="images/ui/kbd-light.png" />
</Frame>

* **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

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

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

## Key props

<ParamField path="className" type="string">
  Use to adjust size (<code>text-xs</code> → <code>text-sm</code>), spacing, or colors.
</ParamField>

## Styling tip

* Keep contrast high and size small; KBD is a hint, not a button.
* Group related keys with <code>KbdGroup</code>.

## Accessibility

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