# Kbd

A keycap for showing keyboard input. One key per cap, grouped as a combo, chord or sequence.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/kbd
```

## Usage

```tsx
import { Kbd, KbdGroup } from '@/components/fetaui/kbd'

export function Example() {
  return <KbdGroup keys={['⌘', 'K']} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| variant | outline, soft, inverse | outline |
| size | sm, md, lg | md |
| pressed | boolean | false |
| disabled | boolean | false |
| spoken | string |  |
| animated | boolean | true |
| KbdGroup kind | combo, chord, sequence | combo |
| KbdGroup keys | string[] |  |
| KbdGroup listen | boolean | false |

## When to use

- Where a shortcut saves time: menus, command palettes, tooltips and search fields.
- Outline on surfaces, Soft in tinted rows and footers, Inverse on dark tooltips.
- Show the platform keys: ⌘ on Mac, Ctrl elsewhere.

## When not to use

- As the only way to do something.
- As a button: Kbd is not interactive.

## Accessibility

- Native kbd elements, so screen readers announce keyboard input.
- Symbols are spoken by name: ⌘ reads Command and ⇧ reads Shift.
- Modifiers come first, in ⌃ ⌥ ⇧ ⌘ order.

## Motion

- Caps stay still unless they teach. With `listen`, a held cap sinks 1 px in 60 ms and returns in 120 ms.
- Chord caps press left to right, 40 ms apart.
- In a sequence, then fades while the next key waits.
- With reduced motion, a held cap shows the wash only and chords press all at once.