Radial Menu

Buttons 2

About

A hand-drawn, sketch-styled radial action menu with a rotating plus trigger that fans a set of icon actions out in a semicircular arc.

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

Code

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

Usage.tsx

"use client";

import RadialMenu from "@/components/ui/radial-menu";

export default function RadialMenuDemo() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center bg-background p-10 text-foreground">
      <RadialMenu
        aria-label="Open tools"
        items={[
          {
            id: "crop",
            icon: <span className="text-sm font-semibold">#</span>,
            label: "Crop",
          },
          {
            id: "text",
            icon: <span className="text-sm font-semibold">T</span>,
            label: "Text",
          },
          { id: "shape", icon: <span aria-hidden>▢</span>, label: "Shape" },
          { id: "draw", icon: <span aria-hidden>✎</span>, label: "Draw" },
          {
            id: "favorite",
            icon: <span aria-hidden>☆</span>,
            label: "Favorite",
          },
        ]}
      />
    </div>
  );
}