Radial Command Ring

Navigation 1

About

A radial pie-style action menu that opens on long-press or right-click, letting you pick an action by flicking the pointer toward it instead of hitting a precise target.

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

Code

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

Usage.tsx

"use client";

import * as Lucide from "lucide-react";
import { RadialCommandRing } from "@/components/ui/radial-command-ring";

export default function RadialCommandRingDemo() {
  return (
    <div className="flex h-screen w-full items-center justify-center bg-background">
      <RadialCommandRing
        items={[
          { id: "copy", label: "Copy", icon: <Lucide.Copy /> },
          { id: "share", label: "Share", icon: <Lucide.Share2 /> },
          { id: "delete", label: "Delete", icon: <Lucide.Trash2 /> },
        ]}
        onSelect={(id) => console.log(id)}
        openOn="both"
        className="flex h-72 w-72 items-center justify-center rounded-2xl border border-dashed border-border text-sm text-muted-foreground"
      >
        Hold anywhere · or right-click
      </RadialCommandRing>
    </div>
  );
}