Components•Radial command ring

Radial command ring

Hold anywhere and flick toward an action. You choose by direction, not by hitting a target. Release inside the centre to cancel.

Dependencies

Motionclsx

Copy below cli

npx shadcn add @bjork-ui/radial-command-ring

How to use

import { RadialCommandRing } from "@/components/bjork-ui/navigation/radial-command-ring";export function Demo() {  return (    <RadialCommandRing      items={[        { id: "copy", label: "Copy", icon: <Copy /> },        { id: "share", label: "Share", icon: <Share2 /> },        { id: "delete", label: "Delete", icon: <Trash2 /> },      ]}      onSelect={(id) => console.log(id)}      openOn="both"    >      <Canvas />    </RadialCommandRing>  );}

Hold anywhere · or right-click

Last action: —