Right-click or long-press here · Shift F10 on the title
<DialMenu variant="minimal" />Clean surfaces and measured motion.
Installation
Use the shadcn CLI to copy the component source and its dependencies into your own project. Only the Minimal world, with motion, plus the Ovio theme, world, motion items.
npx shadcn add JanaSundar/ovio/dial-menu-minimal↳You own the source. Ovio components arrive in your codebase so you can edit any part of their style, behavior, or data flow.
Usage
Set the visual world on the component, or wrap the page in an OvioProvider to set a default for everything inside it.
TSXvariant="minimal"
import { DialMenu } from "@/components/ovio/dial-menu/dial-menu"
<DialMenu
variant="minimal"
items={[{ id: "share", label: "Share", icon: <ShareIcon />, items: [...] }]}
onSelect={(item) => run(item.id)}
children={<Canvas />}
/>Built with: SVG · React portal · Motion for React (springs; Retro: stepped)
Motion in Minimal: Small springs, opacity and layout shifts that show state.
Props
Control the data, selected world, animation behavior, and callbacks.
| Prop | Type | Description |
|---|---|---|
| items | { id: string; label: string; icon?: ReactNode; shortcut?: string; disabled?: boolean; items?: DialMenuItem[] }[] | Round the ring from 12 o'clock, clockwise; up to eight read best. Items with `items` fan out up to five children past the ring. Icons take currentColor; without one, the label's first letter. |
| variantdefault minimal | minimalcraftretrotoy | Which world to render. Uses the nearest OvioProvider when there is one. |
| triggerdefault "contextmenu" | contextmenuclickinline | Right-click, long-press, or the ContextMenu key (Shift F10) on the children; a click on them; or always open in place, with no children. |
| children | ReactNode | What opens it: the area to right-click, or the button to click. |
| open / defaultOpen | boolean | Controlled, or the starting state. Opened from outside, it centres on the children. |
| onOpenChange | (open: boolean) => void | Fires as it opens, and as it closes on a pick, Escape, a click on the hub or outside, or a scroll. |
| onSelect | (item: DialMenuItem, parent?: DialMenuItem) => void | Fires with the item picked, and its parent for a child: on release after a flick, a click, or Enter. |
| labeldefault "Quick actions" | string | Accessible name for the menu, shown in the hub while nothing is aimed at. |
| disabled | boolean | Never opens; inline, it ignores the pointer and keys. |
| className | string | Merged onto the root. |