Kbd

A keyboard key indicator displays keyboard shortcuts.

Installation

npx shadcn@latest add @dotui/kbd

Usage

import { Kbd } from '@/components/ui/kbd'
;<Kbd>⌘</Kbd> + <Kbd>K</Kbd>

Anatomy

Use Kbd for a single key. Wrap several in KbdGroup to present a key combination as one unit.

import { Kbd, KbdGroup } from '@/components/ui/kbd'
;<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

Examples

Basic Keys

Ctrl⌘KCtrl + B

Keyboard Shortcut

CtrlShiftP

In Tooltip

Input with Keyboard Hint

API Reference

Kbd

A kbd displays a keyboard key or shortcut that triggers an action.

PropType

KbdGroup

Groups multiple keyboard keys together to represent a key combination.

Supports all HTML attributes.

PropType

Last updated on 7/9/2026