Speed Dial
FAB that expands into a radial menu of actions. Compound component: Root, Trigger, Item. Supports spread angle and direction.
360°
180° Down
180° Up
90° Right
90° Down
90° Left
90° Up
Install
Use Open-UI CLI or Shadcn CLI to install the component.
Open-UI CLI
Shadcn CLI
Usage
| Item | Prop | Default | Description | Type |
|---|---|---|---|---|
| Root | children | — | Root: Trigger and Item components. Trigger: optional icon or label for the FAB. Item: icon or label for the action button. | ReactNode |
| Root | spreadRangeAngle | 90 | Total angle (degrees) the items spread over. e.g. 360 full circle, 180 half, 30 narrow. | number |
| Root | directionAngle | 90 | Direction of the fan: 0° = right, 90° = down, 180° = left, 270° = up. | number |
| Root | radius | 120 | Distance from trigger to each item (px). | number |
| Root | itemSize | "default" | Default size for all SpeedDial.Item children (sm, default, lg). | "sm" | "default" | "lg" |
| Root | className | — | Optional CSS class for the Root container. | string |
| Trigger | variant | "default" | Trigger button style: default, outline, or secondary. | "default" | "outline" | "secondary" |
| Trigger | size | "default" | Trigger or Item size: default, sm, or lg. On Item, overrides Root's itemSize. | "default" | "sm" | "lg" |
| Trigger | children | — | Root: Trigger and Item components. Trigger: optional icon or label for the FAB. Item: icon or label for the action button. | ReactNode |
| Item | children | — | Root: Trigger and Item components. Trigger: optional icon or label for the FAB. Item: icon or label for the action button. | ReactNode |
| Item | size | from Root | Trigger or Item size: default, sm, or lg. On Item, overrides Root's itemSize. | "sm" | "default" | "lg" |
| Item | className | — | Optional CSS class for the Root container. | string |
| Item | onClick | — | Callback when the Item is clicked (menu closes after). | () => void |