Nebula Modal 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 { useState } from "react";
import NebulaModal from "./NebulaModal";

export default function Example() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Open modal</button>
    <NebulaModal
      title={"Make room for something great."}
      subtitle={"Ready for your next chapter?"}
      body={"Bring your ideas together in one space. You can change these settings at any time."}
      primaryLabel={"Continue"}
      secondaryLabel={"Cancel"}
      colors={[
        "#101218",
        "#7c83ff",
        "#b5f5d1"
      ]}
      intensity={0.9}
      minHeight={280}
      open={open}
      onClose={() => setOpen(false)}
      onPrimaryClick={() => setOpen(false)}
    />
    </>
  );
}

Using Nebula Modal

Control visibility with open and close the dialog in response to onClose. Supply a meaningful title and the content through body or children.

Wire primary and secondary actions to their matching callbacks. Use closeLabel to describe the dismiss control in the language of your interface.

Props

Name	Type	Required	Default	Description
open	boolean	No	false	Whether the dialog is open. Control this state in your application.
onClose	function	No	undefined	Called on Escape, backdrop click, or the close button. Set open to false.
title	string	No	""	Main title text shown at the top of the modal card.
subtitle	string	No	""	Optional supporting line shown just under the title, useful for a short explanation or tagline.
body	string	No	""	Body copy inside the modal. In real usage this would often hold a short paragraph describing the action or message.
children	ReactNode	No	undefined	Your content. No demo content is rendered by default.
primaryLabel	string	No	""	Primary action label. Use an empty string to hide the action.
secondaryLabel	string	No	""	Label for the secondary action button, useful for cancel or dismiss actions.
onPrimaryClick	function	No	undefined	Called when the primary action is pressed; receives current values for forms.
onSecondaryClick	function	No	undefined	Called when the secondary action is pressed; receives current values for forms.
colors	string[]	No	["#101218", "#7c83ff", "#b5f5d1"]	Array of up to three hex colors used to paint the nebula glow behind the modal card.
intensity	number	No	.9	Overall brightness and strength of the nebula glow. Lower values keep the effect more subtle.
minHeight	number \| string	No	260	Minimum height for the modal container. Accepts a number (pixels) or any valid CSS height string.
closeLabel	string	No	"Close dialog"	Accessible label for the dialog close button.
className	string	No	""	Additional CSS class names, merged with base component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.