---
title: Kbd
description: Used to display textual user input from keyboard.
---

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/kbd"

templ KbdDemo() {
	<div class="flex flex-col items-center gap-4">
		@kbd.Group() {
			@kbd.Kbd() {
				⌘
			}
			@kbd.Kbd() {
				⇧
			}
			@kbd.Kbd() {
				⌥
			}
			@kbd.Kbd() {
				⌃
			}
		}
		@kbd.Group() {
			@kbd.Kbd() {
				Ctrl
			}
			<span>+</span>
			@kbd.Kbd() {
				B
			}
		}
	</div>
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
shadcn-templ add kbd
```

</TabsContent>

<TabsContent value="manual">

<Steps className="mb-0 pt-2">

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="kbd" title="components/kbd/kbd.templ" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```go showLineNumbers
import "github.com/axadrn/shadcn-templ/v2/components/kbd"
```

```templ showLineNumbers
@kbd.Kbd() {
	Ctrl
}
```

## Composition

Use the following composition to build `Kbd` and `KbdGroup`:

```text
kbd.Kbd
kbd.Group
├── kbd.Kbd
└── kbd.Kbd
```

## Group

Use the `kbd.Group` component to group keyboard keys together.

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/kbd"

templ KbdGroupExample() {
	<div class="flex flex-col items-center gap-4">
		<p class="text-sm text-muted-foreground">
			Use{ " " }
			@kbd.Group() {
				@kbd.Kbd() {
					Ctrl + B
				}
				@kbd.Kbd() {
					Ctrl + K
				}
			}
			{ " " }to open the command palette
		</p>
	</div>
}
```

## Button

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

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/kbd"
)

templ KbdButton() {
	@button.Button(button.Props{Variant: button.VariantOutline}) {
		Accept
		@kbd.Kbd(kbd.Props{
			Class:      "translate-x-0.5",
			Attributes: templ.Attributes{"data-icon": "inline-end"},
		}) {
			⏎
		}
	}
}
```

## Tooltip

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

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/buttongroup"
	"github.com/axadrn/shadcn-templ/v2/components/kbd"
	"github.com/axadrn/shadcn-templ/v2/components/tooltip"
)

templ KbdTooltip() {
	<div class="flex flex-wrap gap-4">
		@buttongroup.ButtonGroup() {
			@tooltip.Tooltip() {
				@button.Button(button.Props{
					Variant:    button.VariantOutline,
					Attributes: tooltip.Trigger(ctx),
				}) {
					Save
				}
				@tooltip.Content() {
					Save Changes
					@kbd.Kbd() {
						S
					}
				}
			}
			@tooltip.Tooltip() {
				@button.Button(button.Props{
					Variant:    button.VariantOutline,
					Attributes: tooltip.Trigger(ctx),
				}) {
					Print
				}
				@tooltip.Content() {
					Print Document
					@kbd.Group() {
						@kbd.Kbd() {
							Ctrl
						}
						@kbd.Kbd() {
							P
						}
					}
				}
			}
		}
	</div>
}
```

## Input Group

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

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/icon"
	"github.com/axadrn/shadcn-templ/v2/components/inputgroup"
	"github.com/axadrn/shadcn-templ/v2/components/kbd"
)

templ KbdInputGroup() {
	<div class="flex w-full max-w-xs flex-col gap-6">
		@inputgroup.InputGroup() {
			@inputgroup.Input(inputgroup.InputProps{Placeholder: "Search..."})
			@inputgroup.Addon() {
				@icon.Search()
			}
			@inputgroup.Addon(inputgroup.AddonProps{Align: inputgroup.AlignInlineEnd}) {
				@kbd.Kbd() {
					⌘
				}
				@kbd.Kbd() {
					K
				}
			}
		}
	</div>
}
```

## API Reference

### Kbd

Use the `Kbd` component to display a keyboard key.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

```templ
@kbd.Kbd() {
	Ctrl
}
```

### KbdGroup

Use the `kbd.Group` component to group `Kbd` components together.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

```templ
@kbd.Group() {
	@kbd.Kbd() {
		Ctrl
	}
	@kbd.Kbd() {
		B
	}
}
```