Design · Components · Inputs

Kbd

Keyboard keys as printed caps, for shortcuts and hints.

Source
Search⌘KAsk AI⌘ISend⏎

Installation

Copy the source into components/ui/kbd.tsx. Registry items that depend on it install it automatically.

components/ui/kbd.tsx

Usage

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

export function Example() {
  return (
    <KbdGroup>
      <Kbd>⌘</Kbd>
      <Kbd>K</Kbd>
    </KbdGroup>
  );
}

API Reference

Kbd

Renders a native kbd element and accepts its props.

KbdProps
className ?: string

Additional CSS classes.

KbdGroup

Lays out a chord of keys with even spacing.

KbdGroupProps
className ?: string

Additional CSS classes.