Keycap

Component

About

A small raised keycap for displaying a keyboard shortcut or key combination, such as ⌘K, inline in search fields, menus, or toast actions.

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

Code

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

Usage.tsx

import Kbd from "@/components/ui/kbd";

export default function KbdDemo() {
  return (
    <div className="flex items-center gap-3">
      <div className="flex items-center gap-1">
        <Kbd>⌘</Kbd>
        <Kbd>K</Kbd>
      </div>
      <Kbd size="small">↩</Kbd>
      <Kbd surface="strip">⌘K</Kbd>
    </div>
  );
}