---
title: Kbd
description: Used to display textual user input from keyboard.
icon: command
author:
  name: shadcn
  url: https://github.com/shadcn
search:
  keywords: [keyboard shortcut, hotkey]
mode: wide
---

### Installation

```package-install
npx shadcn@latest add @redpanda/kbd
```

<ComponentPreview name="kbd-demo" />

## When to use

The Kbd component displays keyboard keys and shortcuts in a styled format. Use this decision tree to determine when it's appropriate:

```mermaid
graph TD;
    A[❓ Need to show user input?] --> B{Keyboard-related?};
    A --> C[ℹ️ Use other input display];
    B --> D{Keyboard shortcuts?};
    B --> E{Single key reference?};
    D --> F[✅ Use Kbd with combinations];
    E --> G[✅ Use Kbd];
    E --> H[⚠️ Mouse actions?];
    H --> I[ℹ️ Use Button or text];
    F --> J[✅ Show with Command/Ctrl icons];

    classDef recommended fill:#4ade80,stroke:#22c55e,stroke-width:2px,color:#000;
    classDef discouraged fill:#fbbf24,stroke:#f59e0b,stroke-width:2px,color:#000;
    classDef decision fill:#60a5fa,stroke:#3b82f6,stroke-width:2px,color:#fff;
    classDef neutral fill:#9ca3af,stroke:#6b7280,stroke-width:2px,color:#fff;

    class F,G,J recommended;
    class H discouraged;
    class A,B,D,E decision;
    class C,I neutral;
```

## Usage

```tsx
<Kbd>
  <Command /> +K
</Kbd>
```

## Anatomy

The Kbd component displays keyboard keys in a styled format. Here's how the components work together:

```tsx
<Kbd>          {/* Container styled as a keyboard key */}
  <Command />  {/* Optional icon (⌘, Ctrl, Shift, etc.) */}
  +K           {/* Key text or combination */}
</Kbd>

<KbdGroup>     {/* Groups multiple keys together */}
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>
```

### Layout Structure

- **Kbd**: Root component with keyboard key styling (border, padding, rounded corners)
- **KbdGroup**: Flex container that groups multiple Kbd components with proper spacing

### Typical Usage Patterns

```tsx
// Single key
<Kbd>K</Kbd>

// Combination with icon
<Kbd><Command /> K</Kbd>

// Multiple keys in sequence
<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>Shift</Kbd>
  <Kbd>P</Kbd>
</KbdGroup>

// In button
<Button>
  Search <Kbd className="ml-2">⌘K</Kbd>
</Button>

// In tooltip
<TooltipContent>
  <p>Search</p>
  <Kbd><Command /> K</Kbd>
</TooltipContent>

// In input group
<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon>
    <Kbd>⌘K</Kbd>
  </InputGroupAddon>
</InputGroup>
```

## Examples

### Default

<ComponentPreview name="kbd-demo" />

### Group

Use the `KbdGroup` component to group keyboard keys together.

<ComponentPreview name="kbd-group-demo" />

### Button

Use the `Kbd` component inside a `Button` component to display a keyboard key inside a button.

<ComponentPreview name="kbd-button-demo" />

### Tooltip

You can use the `Kbd` component inside a `Tooltip` component to display a tooltip with a keyboard key.

<ComponentPreview name="kbd-tooltip-demo" />

### Input Group

You can use the `Kbd` component inside a `InputGroupAddon` component to display a keyboard key inside an input group.

<ComponentPreview name="kbd-input-group-demo" />

## Props

<div className="flex flex-row gap-x-3">
  <ExternalLink href="https://ui.shadcn.com/docs/components/kbd" text="Docs" />
</div>

## Credits

- We take our inspiration from [Shadcn UI](https://ui.shadcn.com/docs/components/kbd) for the `kbd` component and style.