# Kbd: Sizes

> `sm` sits in small text, `default` next to body text and `lg` in headings or on its own.

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

## Add this example

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

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

## Source

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

const sizes = ["sm", "default", "lg"] as const

export function KbdSizes() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6">
      {sizes.map((size) => (
        <KbdGroup key={size} keys="mod+shift+z" size={size} />
      ))}
    </div>
  )
}
```

## Props in this example

### 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. |
| `size` | `"sm" \| "default" \| "lg"` | – | Passed to every cap inside. |

## More Kbd examples

- [Variants](https://hextaui.com/docs/kbd/examples/variants.md)
- [Shortcuts](https://hextaui.com/docs/kbd/examples/shortcuts.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)