# Kbd

> A keyboard shortcut written for the reader's keyboard (⌘ on a Mac, Ctrl elsewhere) whose keys sink when you press them for real.

Shortcut hints are usually hard-coded to one platform. Here "mod" reads ⌘ on a Mac and Ctrl elsewhere, modifiers get their symbols on a Mac, and with live on, each key sinks while you hold it, so the hint answers the keyboard.

## Install

```bash
npx shadcn@latest add https://hairlineui.com/r/kbd.json
```

Needs React 19, Tailwind CSS v4 and shadcn/ui theme variables (any style, light and dark). Icons from lucide-react.

- npm: none
- Hairline UI components it needs (the CLI installs them too): none
- Docs and live preview: https://hairlineui.com/ui/kbd
- Registry item (source): https://hairlineui.com/r/kbd.json

## Usage

```tsx
import { Kbd } from "@/components/ui/kbd";

<Kbd keys="mod+k" />
<Kbd keys={["shift", "mod", "p"]} live />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `keys` | `string[] \| string` | – | Keys, or "mod+shift+p". |
| `live` | `boolean` | `false` | Keys sink while held. |
| `size` | `"sm" \| "md"` | `"md"` | 20px or 24px. |

## States

- **rest**: Hairline keycaps with a bottom edge.
- **pressed**: With live, the key sinks 1px and darkens while held.

## What it handles

Showing ⌘ to Windows users is a small thing people notice.

- **Right platform**: "mod" is ⌘ or Ctrl; alt is ⌥ or Alt.
- **Live keys**: Keys sink 1px while held.
- **Readable**: Screen readers hear words ("Command K"), not symbols.
- **Two sizes**: 20px or 24px keycaps.

## Replaces

platform detection, keycap styling

## Where it fits

- **Menus**: Shortcuts at the end of each row.
- **Command palettes**: The ⌘K hint in a search field.
- **Help and onboarding**: A list of keys to learn.
- **Tooltips**: The key after the name.

## Notes

- The platform is read after hydration, so the server renders the Mac form.

License: MIT (https://hairlineui.com/license#components)