Aurora Shimmer
Buttons
Nebula Modal
A glassy modal card wrapped in a soft, animated nebula glow.
Customize
ADVERT
Overview
Nebula Modal gives you a centered, glassy modal card sitting in front of a subtle nebula glow. The backdrop drifts slowly behind the card while the shell tilts gently with pointer movement, making confirmations, sign‑in prompts and announcements feel more premium without overwhelming the rest of the UI.
Props
Use the props below to customise the nebula modal in your own React application.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| title | string | No | Stay in the flow | Main title text shown at the top of the modal card. |
| subtitle | string | No | Glassy modal with nebula glow | Optional supporting line shown just under the title, useful for a short explanation or tagline. |
| body | string | No | Use this modal card for product‑level confirmations, sign‑in prompts or announcements that deserve a soft, cinematic backdrop. | Body copy inside the modal. In real usage this would often hold a short paragraph describing the action or message. |
| primaryLabel | string | No | Continue | Label for the primary action button on the right-hand side of the modal footer. |
| secondaryLabel | string | No | Cancel | Label for the secondary action button, useful for cancel or dismiss actions. |
| colors | string[] | No | ["#020617", "#22d3ee", "#e879f9"] | Array of up to three hex colors used to paint the nebula glow behind the modal card. |
| intensity | number | No | 0.9 | Overall brightness and strength of the nebula glow. Lower values keep the effect more subtle. |
| tilt | number | No | 1 | How much the modal shell tilts in 3D as you move the pointer across the component. |
| minHeight | number | string | No | 280 | Minimum height for the modal container. Accepts a number (pixels) or any valid CSS height string. |
| className | string | No | undefined | Optional custom class name for the root container so you can control outer layout and spacing. |
Related React components
More components from the same category or sharing similar tags.
