Unlumen Kbd

Component

About

Keyboard key and shortcut components from Unlumen UI.

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

Code

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

Usage.tsx

import { Kbd, Shortcut } from "@/components/ui/unlumen-kbd";

export default function Demo() {
  return (
    <div className="flex flex-col items-center justify-center gap-6 p-8">
      <div className="flex flex-wrap items-center justify-center gap-2">
        {["⌘", "⌥", "⇧", "⌃", "⏎", "⌫", "⇥", "Esc"].map((key) => (
          <Kbd key={key}>{key}</Kbd>
        ))}
      </div>
      <div className="flex flex-col gap-3 text-sm text-muted-foreground">
        <div className="flex items-center justify-between gap-8">
          <span>Save file</span>
          <Shortcut keys={["⌘", "S"]} />
        </div>
        <div className="flex items-center justify-between gap-8">
          <span>Open command menu</span>
          <Shortcut keys={["⌘", "K"]} />
        </div>
        <div className="flex items-center justify-between gap-8">
          <span>Undo</span>
          <Shortcut keys={["⌘", "Z"]} />
        </div>
        <div className="flex items-center justify-between gap-8">
          <span>Find & replace</span>
          <Shortcut keys={["⌘", "⇧", "H"]} />
        </div>
      </div>
    </div>
  );
}