Speed Dial React component
A floating action button that opens into a short menu of actions: the plus turns into a close cross while actions spring out one after another in a line or a quarter-circle fan, each with a label, with an optional dimmed backdrop and full keyboard control.
When to use the Speed Dial component
Use Speed Dial on mobile-first screens and canvases where one floating button should lead to a few related actions: create note / photo / file, share options, quick tools.
Keep it to three to six actions; for more, open a menu or a sheet instead.
Installation
Add the Speed Dial component to your project with the shadcn CLI. It lands in components/speed-dial.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add https://reactframe.com/r/speed-dial.jsonOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<SpeedDial /> accepts 9 props, all optional.
| Prop | Type | Default |
|---|---|---|
| actions | { label: string; icon: SpeedDialIcon | React.ReactNode; onClick?: () => void }[] | DEFAULT_ACTIONS |
| direction Which way the actions open. radial fans them over a quarter circle. | "up" | "down" | "left" | "right" | "radial" | "up" |
| openOnHover Open on hover as well as on click. | boolean | false |
| backdrop Dim everything behind while open. | boolean | false |
| corner Corner of the positioned parent (or the screen) to sit in. | "bottom-right" | "bottom-left" | "top-right" | "top-left" | "bottom-right" |
| contained Place it inside the nearest positioned ancestor instead of fixed on the screen. | boolean | false |
| label | string | "Quick actions" |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- actions{ label: string; icon: SpeedDialIcon | React.ReactNode; onClick?: () => void }[]Default: DEFAULT_ACTIONS
- direction
Which way the actions open. radial fans them over a quarter circle.
"up" | "down" | "left" | "right" | "radial"Default: "up" - openOnHover
Open on hover as well as on click.
booleanDefault: false - backdrop
Dim everything behind while open.
booleanDefault: false - corner
Corner of the positioned parent (or the screen) to sit in.
"bottom-right" | "bottom-left" | "top-right" | "top-left"Default: "bottom-right" - contained
Place it inside the nearest positioned ancestor instead of fixed on the screen.
booleanDefault: false - labelstringDefault: "Quick actions"
- theme"dark" | "light"Default: "dark"
- classNamestring
FAQ
- Which direction should it open?
- Up for a bottom corner, left or right along an edge, and the fan when there's room diagonally. Labels automatically sit on the side facing into the screen.
- Can it be used with a keyboard?
- Yes. It's a menu button: arrow keys move from the main button into the actions and between them, Enter runs one, and Escape closes and returns focus.
- Does it cover the page?
- Only if you set backdrop, which dims everything behind and closes on click. Without it the page stays usable around the open menu.
