Kbd

Component 3

About

A keycap printed in a line of text, for shortcuts and docs. Symbols such as ⌘ are read aloud by name. Skeuomorphic, accessible, Base UI. Part of Bevel: bevel-ui.vercel.app

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Kbd to your project and fits it to your theme.

Code

How Kbd is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

const shortcuts = [
  { action: "Open the command menu", keys: ["⌘", "K"] },
  { action: "New conversation", keys: ["⌘", "⇧", "O"] },
  { action: "Stop the agent", keys: ["Esc"] },
  { action: "Send message", keys: ["↵"] },
  { action: "Previous message", keys: ["↑"] },
]

/** A shortcuts sheet. Each cap goes down when you press that key on your own keyboard. */
export function KbdShortcuts() {
  return (
    <div className="w-full max-w-sm rounded-xl border bg-card p-4">
      <p className="text-sm font-semibold">Keyboard shortcuts</p>
      <p className="text-xs text-muted-foreground">Try them: the caps press with your keys.</p>
      <dl className="mt-3 divide-y">
        {shortcuts.map(({ action, keys }) => (
          <div key={action} className="flex items-center justify-between gap-4 py-2 text-sm">
            <dt>{action}</dt>
            <dd>
              <KbdGroup>
                {keys.map((key) => (
                  <Kbd key={key} listen>
                    {key}
                  </Kbd>
                ))}
              </KbdGroup>
            </dd>
          </div>
        ))}
      </dl>
    </div>
  )
}

export default KbdShortcuts