Fluid Action Panel

A professional, highly interactive floating utility widget that morphs between a collapsed progress trigger and an expanded glassmorphic settings dashboard. Features page scroll progress tracking, custom theme togglers, and clean copy-link and social sharing shortcuts with responsive touch controls.

...

How to Import

Add this import to your component file

app/page.tsx

1import { FluidActionPanel } from "@/components/lightswind/fluid-action-panel";

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

position	"bottom-right" \| "bottom-left" \| "top-right" \| "top-left"	"bottom-right"	Controls where the floating trigger is anchored relative to the viewport.	Optional
isDark	boolean	false	Controls which theme state icon (Sun/Moon) is active inside the panel.	Optional
onThemeToggle	() => void	-	Callback function triggered when the user clicks the theme toggle widget button.	Optional
className	string	-	Additional classes applied to the root absolute wrapping layout.	Optional

Basic Usage

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

app/page.tsx

1import { FluidActionPanel } from "@/components/lightswind/fluid-action-panel";
2
3export default function App() {
4  const [isDark, setIsDark] = useState(false);
5
6  return (
7    <div className="relative min-h-screen">
8      {/* Content here */}
9      
10      <FluidActionPanel
11        position="bottom-right"
12        isDark={isDark}
13        onThemeToggle={() => setIsDark(!isDark)}
14      />
15    </div>
16  );
17}

Previousmarquee-menu

Nextknowledge-convergence

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

Fluid Action Panel

A professional, highly interactive floating utility widget that morphs between a collapsed progress trigger and an expanded glassmorphic settings dashboard. Features page scroll progress tracking, custom theme togglers, and clean copy-link and social sharing shortcuts with responsive touch controls.

...

How to Import

Add this import to your component file

app/page.tsx

1import { FluidActionPanel } from "@/components/lightswind/fluid-action-panel";

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

position	"bottom-right" \| "bottom-left" \| "top-right" \| "top-left"	"bottom-right"	Controls where the floating trigger is anchored relative to the viewport.	Optional
isDark	boolean	false	Controls which theme state icon (Sun/Moon) is active inside the panel.	Optional
onThemeToggle	() => void	-	Callback function triggered when the user clicks the theme toggle widget button.	Optional
className	string	-	Additional classes applied to the root absolute wrapping layout.	Optional

Basic Usage

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

app/page.tsx

1import { FluidActionPanel } from "@/components/lightswind/fluid-action-panel";
2
3export default function App() {
4  const [isDark, setIsDark] = useState(false);
5
6  return (
7    <div className="relative min-h-screen">
8      {/* Content here */}
9      
10      <FluidActionPanel
11        position="bottom-right"
12        isDark={isDark}
13        onThemeToggle={() => setIsDark(!isDark)}
14      />
15    </div>
16  );
17}

Previousmarquee-menu

Nextknowledge-convergence

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

Fluid Action Panel

How to Import

Props

Basic Usage

On This Page

Contribute

Fluid Action Panel

How to Import

Props

Basic Usage

On This Page

Contribute

React Fluid Action Panel Component - Lightswind UI

Key Details of React Fluid Action Panel

Fluid Action Panel

How to Import

Props

Basic Usage

On This Page

Contribute

Fluid Action Panel

How to Import

Props

Basic Usage

On This Page

Contribute