Kbd

Displays keyboard keys and shortcuts as muted chips. KbdGroup lines up multiple keys into a combination.

Playground

⌘⇧K

keys

group

<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>⇧</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

Preview

Render one Kbd per key. Wrap a shortcut in KbdGroup to space the keys as a single combination.

EscTab⌘KCtrl+S

<Kbd>Esc</Kbd>
<Kbd>Tab</Kbd>
<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>
<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <span className="text-xs text-muted-foreground">+</span>
  <Kbd>S</Kbd>
</KbdGroup>

Installation

npx shadcn@latest add https://espresso-base-ui.vercel.app/r/kbd.json

Usage

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

<p>
  Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to open the command palette.
</p>

With icons

Pass an icon as the child – an svg without an explicit size class is auto-sized to size-3.

++K

<KbdGroup>
  <Kbd>
    <Command />
  </Kbd>
  <span className="text-xs text-muted-foreground">+</span>
  <Kbd>
    <ArrowBigUp />
  </Kbd>
  <span className="text-xs text-muted-foreground">+</span>
  <Kbd>K</Kbd>
</KbdGroup>
<Kbd>
  <CornerDownLeft />
</Kbd>

In buttons

Drop a KbdGroup at the trailing edge of a button to advertise its shortcut.

<Button variant="outline" size="sm" className="gap-6">
  <span className="flex items-center gap-2">
    <Search />
    Search
  </span>
  <KbdGroup>
    <Kbd>⌘</Kbd>
    <Kbd>K</Kbd>
  </KbdGroup>
</Button>

In tooltips

Inside a TooltipContent, Kbd detects the context and swaps to a translucent background so it reads on the inverted tooltip surface – no extra props needed.

<Tooltip>
  <TooltipTrigger render={<Button variant="outline" size="sm" />}>
    Copy
  </TooltipTrigger>
  <TooltipContent>
    <span>Copy</span>
    <KbdGroup>
      <Kbd>⌘</Kbd>
      <Kbd>C</Kbd>
    </KbdGroup>
  </TooltipContent>
</Tooltip>

API reference

Both parts are purely presentational – they take className, children and standard element props. There are no variants.

Component	Description
Kbd	A single key on a muted chip (data-slot="kbd"). Renders a native kbd element, minimum size-5, with pointer-events-none and select-none so it stays decorative. Auto-sizes svg children to size-3 and adapts its colors inside tooltip content.
KbdGroup	Inline row that groups keys into a combination with a 1-unit gap (data-slot="kbd-group"). Also renders a kbd element; mix in plain text like "+" or "then" between keys.

Accessibility & styling hooks

Kbd renders the semantic HTML kbd element, so assistive technology understands the content as keyboard input. The chips are non-interactive by design (pointer-events-none, select-none) – pair them with a real control or text label rather than using them as buttons. Target [data-slot="kbd"] and [data-slot="kbd-group"] from CSS for app-level overrides.