Components

Neon Modal

Cyberpunk-styled modal dialog with corner cuts, neon glow, comet border beam, animated entry/exit, scrollable body, header/footer slots, and full color customization.

npx neonblade add neon-modal

Basic

Accent Colors

Background Color

Sizes

Corners

Animations (enter/exit)

Plain (no dividers)

Border Beam

Scrollable Body

Props Configuration

Prop	Type	Default	Description
`open`	`boolean`	-	Controls whether the modal is visible.
`onClose`	`() => void`	-	Called when the user requests a close via backdrop click, Escape key, or the close button.
`color`	`"cyan" \| "pink" \| "green" \| "orange" \| string`	`"cyan"`	Accent color driving the border glow, header label, close button, and scrollbar. Use a preset name or any valid CSS color (e.g. "#a855f7").
`bgColor`	`string`	`"#080b0d"`	Background color of the modal inner surface. Accepts any valid CSS color string.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "full"`	`"md"`	Max-width preset for the dialog panel. xs=380px, sm=480px, md=560px, lg=680px, xl=820px, full=viewport width.
`corner`	`"bottom-right" \| "bottom-left" \| "top-right" \| "top-left" \| "all" \| "none"`	`"bottom-right"`	Which corner(s) of the dialog panel receive the diagonal clip-path cut.
`cornerSize`	`number`	`24`	Depth of the corner cut in pixels.
`animation`	`"slide" \| "scale" \| "none"`	`"slide"`	Entry and exit animation for the dialog panel. slide moves from below; scale zooms from center.
`glowIntensity`	`"none" \| "low" \| "medium" \| "high"`	`"medium"`	Intensity of the neon drop-shadow radiating from the dialog edges.
`backdropBlur`	`boolean`	`true`	When true, a blur filter is applied to the backdrop.
`backdropOverlay`	`boolean`	`true`	When true, a dark translucent overlay sits behind the dialog.
`closeOnBackdrop`	`boolean`	`true`	When true, clicking the backdrop calls onClose.
`closeOnEscape`	`boolean`	`true`	When true, pressing the Escape key calls onClose.
`showCloseButton`	`boolean`	`true`	When true, an × close button is rendered in the header (only when a header is provided).
`dividers`	`boolean`	`true`	When true, shows a border line between header/body and body/footer. Set to false for a plain, borderless interior.
`borderBeam`	`boolean`	`false`	When true, a comet-style beam animates around the modal border, traveling along the full clip-path shape.
`beamSpeed`	`number`	`3`	Revolution speed of the border beam in seconds. Lower values are faster. Only applies when borderBeam is true.
`beamLength`	`number`	`60`	Arc length of the comet tail in degrees (0–360). Larger values produce a longer glowing trail. Only applies when borderBeam is true.
`scrollableBody`	`boolean`	`false`	When true, the body area scrolls independently (max-height: 55vh) with a styled accent scrollbar.
`header`	`{ title: ReactNode; label?: string }`	`—`	Optional header config. title is the main heading; label is a small accent-colored category text rendered above the title. Omit for a header-less modal.
`footer`	`{ children: ReactNode; align?: "left" \| "center" \| "right" \| "between" }`	`—`	Optional footer config. children holds action buttons; align controls their horizontal placement. Omit for a footer-less modal.
`children`	`ReactNode`	-	Content rendered inside the modal body.
`className`	`string`	`""`	Additional class names applied to the dialog panel wrapper.
`ariaLabel`	`string`	`—`	Accessible label for the dialog (aria-label). Use when no header title is present.