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>
);
}