Expandable Speed Dial

A functional speed dial that expands into multiple floating action buttons with staggered physics animations.

How to Import

Add this import to your component file

app/page.tsx

1import { ExpandableSpeedDial, SpeedDialAction } from "@/components/lightswind/expandable-speed-dial"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

actions	SpeedDialAction[]	-	Array of actions to show when expanded. Each action requires an icon, label, and onClick handler.	Required
direction	"up" \| "down" \| "left" \| "right"	"up"	The direction to expand the actions.	Optional
size	"sm" \| "md" \| "lg"	"md"	The size of the main dial and internal buttons.	Optional
className	string	-	Additional CSS classes for the container.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { ExpandableSpeedDial, SpeedDialAction } from "@/components/lightswind/expandable-speed-dial";
2import { FileEdit, Share2, Download, Printer } from "lucide-react";
3
4export function SpeedDialDemo() {
5  const actions: SpeedDialAction[] = [
6    { icon: <FileEdit className="h-4 w-4" />, label: "Edit", onClick: () => console.log("Edit") },
7    { icon: <Share2 className="h-4 w-4" />, label: "Share", onClick: () => console.log("Share") },
8  ];
9
10  return (
11    <div className="flex justify-center py-20">
12      <ExpandableSpeedDial actions={actions} direction="up" size="lg" />
13    </div>
14  );
15}

Previousexpandable-search-bar

Nextglass-folder

A product byＭＵＨＩＬＡＮ and Team❤️.

Expandable Speed Dial

A functional speed dial that expands into multiple floating action buttons with staggered physics animations.

...

How to Import

Add this import to your component file

app/page.tsx

1import { ExpandableSpeedDial, SpeedDialAction } from "@/components/lightswind/expandable-speed-dial"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

actions	SpeedDialAction[]	-	Array of actions to show when expanded. Each action requires an icon, label, and onClick handler.	Required
direction	"up" \| "down" \| "left" \| "right"	"up"	The direction to expand the actions.	Optional
size	"sm" \| "md" \| "lg"	"md"	The size of the main dial and internal buttons.	Optional
className	string	-	Additional CSS classes for the container.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { ExpandableSpeedDial, SpeedDialAction } from "@/components/lightswind/expandable-speed-dial";
2import { FileEdit, Share2, Download, Printer } from "lucide-react";
3
4export function SpeedDialDemo() {
5  const actions: SpeedDialAction[] = [
6    { icon: <FileEdit className="h-4 w-4" />, label: "Edit", onClick: () => console.log("Edit") },
7    { icon: <Share2 className="h-4 w-4" />, label: "Share", onClick: () => console.log("Share") },
8  ];
9
10  return (
11    <div className="flex justify-center py-20">
12      <ExpandableSpeedDial actions={actions} direction="up" size="lg" />
13    </div>
14  );
15}

Previousexpandable-search-bar

Nextglass-folder

A product byＭＵＨＩＬＡＮ and Team❤️.

Expandable Speed Dial

How to Import

Props

Basic Usage

On This Page

Contribute

Expandable Speed Dial

How to Import

Props

Basic Usage

On This Page

Contribute

React Expandable Speed Dial Component - Lightswind UI

Key Details of React Expandable Speed Dial

Expandable Speed Dial

How to Import

Props

Basic Usage

On This Page

Contribute

Expandable Speed Dial

How to Import

Props

Basic Usage

On This Page

Contribute