Kbd

A <kbd> element for rendering keyboard shortcuts and key indicators. It provides a compact, styled key cap appearance with muted background. Use KbdGroup to compose multi-key combinations.

CtrlK

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

export default function KbdDemo() {
  return (
    <KbdGroup>
      <Kbd>Ctrl</Kbd>
      <Kbd>K</Kbd>
    </KbdGroup>
  )
}

Anatomy

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

<Kbd>K</Kbd>

Examples

Single key

<Kbd>Enter</Kbd>

Key combination

Use KbdGroup to display multi-key shortcuts.

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

Kbd adapts its colors when placed inside a tooltip.

<Tooltip>
  <TooltipTrigger>Search</TooltipTrigger>
  <TooltipContent>
    Search <Kbd>Ctrl+K</Kbd>
  </TooltipContent>
</Tooltip>

API Reference

Kbd

A styled <kbd> element that renders as an inline key cap.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

KbdGroup

A <kbd> wrapper that lays out multiple Kbd elements inline with consistent gap spacing.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

Kbd