# Kbd: Shortcuts

> `<KbdGroup />` splits a combo into one cap per key. A space starts a sequence, joined by `separator`. `<Kbd />` with `keys` keeps the whole combo in one cap.

Example: https://hextaui.com/docs/kbd/examples/shortcuts
Component docs: https://hextaui.com/docs/kbd.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/kbd-shortcuts.json
```

This adds `components/examples/kbd/shortcuts.tsx` with the Kbd component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/kbd/shortcuts.tsx"
import { Kbd, KbdGroup } from "@/components/ui/kbd"

const shortcuts = [
  { label: "Command palette", keys: "mod+k" },
  { label: "Move line up", keys: "alt+up" },
  { label: "Close", keys: "escape" },
  { label: "Go to dashboard", keys: "g d" },
]

export function KbdShortcuts() {
  return (
    <dl className="grid w-full max-w-xs grid-cols-[1fr_auto] items-center gap-x-6 gap-y-3 text-sm">
      {shortcuts.map((shortcut) => (
        <div key={shortcut.keys} className="contents">
          <dt className="text-muted-foreground">{shortcut.label}</dt>
          <dd>
            <KbdGroup keys={shortcut.keys} />
          </dd>
        </div>
      ))}
      <dt className="text-muted-foreground">Save, as one cap</dt>
      <dd>
        <Kbd keys="mod+s" />
      </dd>
    </dl>
  )
}
```

## Props in this example

### Kbd

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `keys` | `string` | – | Keys joined with +, like "mod+shift+p". mod is ⌘ on Apple devices and Ctrl elsewhere. Names such as alt, enter, escape, up and space become symbols or short words, and get a spoken name for screen readers. |

### KbdGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `keys` | `string` | – | Keys joined with +, like "mod+shift+p". mod is ⌘ on Apple devices and Ctrl elsewhere. Names such as alt, enter, escape, up and space become symbols or short words, and get a spoken name for screen readers. Spaces separate the steps of a sequence. |

## More Kbd examples

- [Variants](https://hextaui.com/docs/kbd/examples/variants.md)
- [Sizes](https://hextaui.com/docs/kbd/examples/sizes.md)
- [Live keys](https://hextaui.com/docs/kbd/examples/listen.md)
- [In a button](https://hextaui.com/docs/kbd/examples/button.md)
- [Icons and actions](https://hextaui.com/docs/kbd/examples/composed.md)
- [Right to left](https://hextaui.com/docs/kbd/examples/rtl.md)