# Kbd: Variants

> `keycap` has a hairline edge and a 1px lip so it reads as a physical key. `flat` is a quiet fill for dense places like menus.

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

## Add this example

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

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

## Source

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

export function KbdVariants() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6">
      <KbdGroup keys="mod+c" />
      <KbdGroup keys="mod+c" variant="flat" />
    </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. |
| `variant` | `"keycap" \| "flat"` | – | Passed to every cap inside. |

## More Kbd examples

- [Sizes](https://hextaui.com/docs/kbd/examples/sizes.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)