A round action button that opens a grid of quick actions through an iris: a clip-path circle widens from the trigger and items arrive in rings by distance from the centre.
menufabquick actionsgridradialclip-pathirisstagger
Installation
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
$npx shadcn@latest add @geturui-pro/iris-menu
Usage
usage.tsx
1import { CloudUpload, FileText, Share2, UserPlus } from "lucide-react";
2import { IrisMenu } from "@/components/ui/iris-menu";
3
4export function QuickActions() {
5 return (
6 <IrisMenu
7 label="Quick actions"
8 onSelect={(value) => console.log(value)}
9 items={[
10 { value: "doc", label: "New doc", icon: <FileText /> },
11 { value: "upload", label: "Upload", icon: <CloudUpload /> },
12 { value: "share", label: "Share", icon: <Share2 /> },
13 { value: "invite", label: "Invite", icon: <UserPlus /> },
14 ]}
15 />
16 );
17}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items* | { value: string; label: string; icon: ReactNode; disabled?: boolean }[] | — | Menu entries placed around the centre cell in reading order. |
columns | number | 3 | Grid columns, rounded up to an odd number so the trigger sits in the centre cell. Rows grow in pairs. |
cellSize | number | 76 | Cell size in px. |
onSelect | (value: string) => void | — | Called with the chosen item's value; the menu then closes. |
open | boolean | — | Controlled open state. |
defaultOpen | boolean | false | Open on mount when uncontrolled. |
onOpenChange | (open: boolean) => void | — | Called when the menu opens or closes. |
label | string | "Open quick actions" | Accessible name for the trigger and the menu. |
icon | ReactNode | <Plus /> | Trigger glyph; rotates 45° when open. |
className | string | — | Classes for the 56px anchor wrapper. |
Accessibility
- Trigger has aria-haspopup="menu", aria-expanded and aria-controls; the grid is role="menu" with role="menuitem" buttons.
- Focus moves to the first item on open. Arrow keys move through the grid in 2D (skipping the centre and blanks), Home and End jump, Escape closes and returns focus to the trigger, Tab closes.
- Outside press closes. With reduced motion the iris and stagger become a plain fade.