# Kbd

Keyboard shortcuts and keys.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentPreview name="kbd-demo">
  <div className="flex flex-col gap-8 items-center py-8 w-full justify-center">
    <div className="flex items-center gap-4">
      <Kbd>
        K
      </Kbd>

      <Kbd>
        Enter
      </Kbd>

      <Kbd>
        Ctrl
      </Kbd>

      <Kbd>
        Shift
      </Kbd>
    </div>

    <div className="flex flex-col gap-2 text-center text-sm text-muted-foreground pt-4 border-t w-full max-w-sm">
      <p>
        Shortcuts
      </p>

      <div className="flex items-center justify-center gap-4 mt-2">
        <KbdGroup>
          <Kbd>
            Ctrl
          </Kbd>

          <Kbd>
            K
          </Kbd>
        </KbdGroup>

        <KbdGroup>
          <Kbd>
            <Command className="w-3 h-3" />
          </Kbd>

          <Kbd>
            J
          </Kbd>
        </KbdGroup>

        <KbdGroup>
          <Kbd>
            Alt
          </Kbd>

          <Kbd>
            Shift
          </Kbd>

          <Kbd>
            Del
          </Kbd>
        </KbdGroup>
      </div>
    </div>
  </div>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/kbd.json"
```

## Usage [#usage]

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

export function MyComponent() {
  return (
    <KbdGroup>
      <Kbd>⌘</Kbd>
      <Kbd>K</Kbd>
    </KbdGroup>
  )
}
```

## Examples [#examples]

### Enter Key [#enter-key]

<ComponentPreview name="kbd-enter">
  <div className="flex flex-wrap items-center justify-center gap-4 py-8">
    <Kbd>
      <CornerDownLeft className="w-3 h-3" />
    </Kbd>

    <Kbd>
      Enter
    </Kbd>

    <Kbd>
      Return 

      <CornerDownLeft className="w-3 h-3" />
    </Kbd>

    <KbdGroup>
      <Kbd>
        <Command className="w-3 h-3" />
      </Kbd>

      <Kbd>
        <CornerDownLeft className="w-3 h-3" />
      </Kbd>
    </KbdGroup>

    <KbdGroup>
      <Kbd>
        Shift
      </Kbd>

      <Kbd>
        Enter
      </Kbd>
    </KbdGroup>
  </div>
</ComponentPreview>

## API Reference [#api-reference]

The `Kbd` component accepts standard HTML `kbd` attributes. It provides an inset shadow effect to mimic a physical key.

| Prop        | Type     | Default | Description                                     |
| ----------- | -------- | ------- | ----------------------------------------------- |
| `className` | `string` | -       | CSS classes to override default keycap styling. |