Flux Toast Stack React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import FluxToastStack from "./FluxToastStack";

export default function Example() {
  return (
    <FluxToastStack
      items={[
        {
          "id": "saved",
          "title": "Changes saved",
          "message": "Your project is up to date.",
          "time": "Now",
          "variant": "success"
        },
        {
          "id": "export",
          "title": "Export ready",
          "message": "Your files are ready to download.",
          "time": "2m ago",
          "variant": "info"
        },
        {
          "id": "invite",
          "title": "Invite accepted",
          "message": "Alex joined your workspace.",
          "time": "5m ago",
          "variant": "info"
        }
      ]}
      colors={[
        "#020617",
        "#38bdf8",
        "#a855f7"
      ]}
      intensity={0.9}
      tilt={1}
      parallax={1}
      stackGap={18}
      expandedGap={110}
      stackDepth={28}
      minHeight={440}
    />
  );
}

Using Flux Toast Stack

Pass the current notifications through items and remove the corresponding item when onDismiss runs.

Use stackDepth to limit how many notifications are visually exposed. Keep notification text concise so the expanded stack remains easy to scan.

Props

Name	Type	Required	Default	Description
items	{ id: string; title: string; message: string; time: string; variant?: 'info' \| 'success' \| 'warning' }[]	No	[]	Toast definitions rendered in the stacked list.
onDismiss	(id: string) => void	No	undefined	Called with the notification id after its dismiss animation.
colors	string[]	No	["#020617", "#38bdf8", "#a855f7"]	Array of up to three hex colors used for the background and glow accents.
intensity	number	No	0.9	Overall glow strength for the stack.
tilt	number	No	1	How much the stack tilts in 3D as you move the pointer.
parallax	number	No	1	How far the glow shifts with pointer movement.
stackGap	number	No	18	Base spacing between stacked toasts in pixels.
expandedGap	number	No	110	Spacing between toasts when the stack is expanded.
stackDepth	number	No	28	Depth offset applied to each toast in the stack.
minHeight	number \| string	No	420	Minimum height for the component container. Accepts a number (pixels) or any valid CSS height string.
className	string	No	undefined	Additional CSS class names, merged with base component styles.