Circular Command Menu

Buttons 469

About

Circular Command Menu, toggled circular menu with default 5 menu components ,easily custamizable animated menu component

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

Code

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

Usage.tsx

import { Component } from "@/components/ui/circular-command-menu";
import {Copy,Download,Share2,Bookmark,Edit,Trash2} from "lucide-react"

const commandItems = [
  { id: "copy", icon: <Copy className="h-5 w-5" />, label: "Copy", shortcut: "Cmd+C" },
  { id: "download", icon: <Download className="h-5 w-5" />, label: "Download", shortcut: "Cmd+D" },
  { id: "share", icon: <Share2 className="h-5 w-5" />, label: "Share", shortcut: "Cmd+S" },
  { id: "bookmark", icon: <Bookmark className="h-5 w-5" />, label: "Bookmark", shortcut: "Cmd+B" },
  { id: "edit", icon: <Edit className="h-5 w-5" />, label: "Edit", shortcut: "Cmd+E" },
  { id: "delete", icon: <Trash2 className="h-5 w-5" />, label: "Delete", shortcut: "Del" },
]
export default function DemoOne() {
  return <Component items={commandItems}  />;
}