Kbd

Installation

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:

Usage

    <Kbd>
      <Command /> +K
    </Kbd>

Anatomy

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

<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

// 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

Group

Use the KbdGroup component to group keyboard keys together.

Button

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

Tooltip

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

Input Group

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

Props

Credits

• We take our inspiration from Shadcn UI for the kbd component and style.