Dropdown

Navigation 4

About

A click-triggered dropdown menu with a sci-fi styled panel, icons, keyboard shortcuts, separators and danger items, closing on outside click or Escape.

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

Code

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

Usage.tsx

import { Dropdown } from "@/components/ui/dropdown";

export default function DropdownDemo() {
  return (
    <div className="flex items-center justify-center p-10">
      <Dropdown
        align="left"
        items={[
          { label: "Profile" },
          { label: "Settings" },
          { separator: true, label: "" },
          { label: "Log out", variant: "danger" },
        ]}
      >
        <button
          type="button"
          className="rounded border border-border bg-card px-3 py-1.5 text-xs font-mono uppercase tracking-widest text-foreground/70"
        >
          Menu
        </button>
      </Dropdown>
    </div>
  );
}