Kbd

Displays keyboard input such as shortcuts, key combinations, or command prompts.

⌘⇧⌥⌃
export default function KbdHero() {
  return (
    <KbdGroup>
      <Kbd>⌘</Kbd>
      <Kbd>⇧</Kbd>
      <Kbd>⌥</Kbd>
      <Kbd>⌃</Kbd>
    </KbdGroup>
  );
}

Installation

pnpm dlx shadcn@latest add "https://ora-ui.com/r/kbd.json"

Usage

import { Kbd, KbdGroup } from '@/registry/ui/kbd';

<Kbd>⌘K</Kbd>;

Examples

Key Combination

Use KbdGroup to display multi-key shortcuts as a cohesive unit.

⌘ShiftP
export default function KbdCombination() {
  return (
    <KbdGroup>
      <Kbd>⌘</Kbd>
      <Kbd>Shift</Kbd>
      <Kbd>P</Kbd>
    </KbdGroup>
  );
}

Variant

The variant prop controls the visual style of the key.

K
export function KbdSoft() {
  return <Kbd variant="soft">K</Kbd>;
}

API Reference

Kbd

PropTypeDefault
variant"ghost" | "soft" | "surface""soft"
classNamestring—

All other props are forwarded to the underlying <kbd> element.

KbdGroup

PropTypeDefault
classNamestring—

All other props are forwarded to the underlying <div> element.