Kbd

Keyboard key component for displaying keyboard shortcuts and key combinations.

1. Import

Import the keyboard components from the design system.

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

2. Props

Kbd component props.

Prop	Type	Default
className	string	--

3. Usages

Common keyboard shortcut patterns.

Ctrl+BCtrlShiftP

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

export function KbdDemo() {
  return (
    <div className="flex flex-col items-center gap-4">
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <span>+</span>
        <Kbd>B</Kbd>
      </KbdGroup>
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <Kbd>Shift</Kbd>
        <Kbd>P</Kbd>
      </KbdGroup>
    </div>
  );
}