Kbd

Keyboard shortcut display components for showing key combinations in UI.

⌘K

Installation

pnpm dlx stera-ui add kbd

Usage

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

Sizes

⌘K⌘K
SizeDescription
smCompact, for tight spaces like tooltips
mdDefault

Key Combinations

Use KbdGroup to display a sequence of keys.

CtrlB
<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>

Inside a Button

Use data-kbd="inline-end" to position a Kbd at the trailing edge of a button.

<Button>
  Accept <Kbd data-kbd="inline-end">⏎</Kbd>
</Button>

Inside an Input

⌘K
<InputGroup>
  <InputGroupAddon align="inline-start">
    <SiSearch />
  </InputGroupAddon>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon align="inline-end">
    <Kbd>⌘K</Kbd>
  </InputGroupAddon>
</InputGroup>

API Reference

Kbd

PropTypeDefault
size"sm" | "md""md"

Renders a <kbd> element. Accepts all standard <kbd> props.

KbdGroup

Renders a <kbd> wrapper for grouping multiple Kbd components. Accepts all standard <div> props.