Radial Menu

Circular flyout menu that bursts items outward from a center trigger with staggered spring animation.

npx uniqueui add radial-menu

Preview

Usage

import { RadialMenu } from "@/components/ui/radial-menu";
import { User, Settings, Mail, Bell } from "lucide-react";

export default function Example() {
  const menuItems = [
    { id: "profile", label: "Profile", icon: <User className="w-5 h-5" /> },
    { id: "settings", label: "Settings", icon: <Settings className="w-5 h-5" /> },
    { id: "messages", label: "Messages", icon: <Mail className="w-5 h-5" /> },
    { id: "notifications", label: "Notifications", icon: <Bell className="w-5 h-5" /> },
  ];

  return (
    <div className="h-[400px] w-full flex items-center justify-center">
      <RadialMenu items={menuItems} radius={120} />
    </div>
  );
}

Props

Prop	Type	Description
`items`	`RadialMenuItem[]`	Array of item configurations representing the burst actions.
`radius`	`number`	Distance in pixels each item travels from the trigger center.
`startAngle`	`number`	The starting angle for the radial arc (e.g. -90 for top).
`endAngle`	`number`	The concluding angle for the radial arc.
`staggerDelay`	`number`	Staggering time multiplier between cascading children.