Kbd

Component preview

The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.

Preview

Open command palette

⌘K

Trigger spotlight

⌘Space

Screenshot

Shift⌘3

Prop reference

Auto-generated from the component source

Kbd

className

React.ComponentProps<"kbd">

KbdGroup

className

React.ComponentProps<"div">

Code

// owner: Sona
"use client";

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

export default function KbdExample() {
  return (
    <div className="flex flex-wrap gap-4 text-sm">
      <div className="space-y-1">
        <p className="text-muted-foreground">Open command palette</p>
        <KbdGroup>
          <Kbd>⌘</Kbd>
          <Kbd>K</Kbd>
        </KbdGroup>
      </div>
      <div className="space-y-1">
        <p className="text-muted-foreground">Trigger spotlight</p>
        <KbdGroup>
          <Kbd>⌘</Kbd>
          <Kbd>Space</Kbd>
        </KbdGroup>
      </div>
      <div className="space-y-1">
        <p className="text-muted-foreground">Screenshot</p>
        <KbdGroup>
          <Kbd>Shift</Kbd>
          <Kbd>⌘</Kbd>
          <Kbd>3</Kbd>
        </KbdGroup>
      </div>
    </div>
  );
}

Kbd

Component preview

On this page

Command Palette