Aurora Shimmer
Buttons
Flux Toast Stack
A layered toast stack that fans out on hover with cinematic depth.
Customize
ADVERT
Overview
Flux Toast Stack delivers notifications that slide in, stack with depth, and expand on hover for quick scanning. Dismissals collapse into a faint glow particle, keeping the UI crisp and cinematic. Use it for feedback states, activity feeds, and launch updates that need polish.
Props
Use the props below to customise the flux toast stack in your own React application.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| items | { id: string; title: string; message: string; time: string; variant?: 'info' | 'success' | 'warning' }[] | No | [{ id: "orbit-synced", title: "Orbit synced", message: "Telemetry stream is now live across your workspace.", time: "Just now", variant: "info" }] | Toast definitions rendered in the stacked list. |
| onDismiss | (id: string) => void | No | undefined | Callback fired after a toast is dismissed. |
| 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 | 32 | 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 | Optional custom class name merged onto the root container for layout tweaks. |
Related React components
More components from the same category or sharing similar tags.
