Glow
A soft radial-gradient blob for hero and section accents, sitting behind headings or featured icons to add depth. Pure CSS, token-driven off the brand and accent ramps, so it re-tints with the active brand theme and works in dark mode.
bunx shadcn@latest add @nx-ui/glowBehind a heading
A brand glow bleeding up from behind a hero headline — the classic marketing accent. Place it inside a relative container and position it with utility classes.
Regeneration, measured
Every tonne diverted, every round completed — accounted for across your Nexus ReGen sites.
Colours
Four token-backed hues — brand, accent, success and error — so a glow can reinforce a state as well as add polish. Shown at a higher intensity on a subtle surface, where the tint reads clearly.
Behind a featured icon
A small, low-intensity glow lifting a featured icon off the surface — subtle depth for empty states and modal headers.
Intensity
The intensity prop sets the peak opacity of the blob centre (0–100), for anything from a whisper to a strong wash.
API reference
Exported parts and their props, extracted from the component source.
| Prop | Type | Default | Description |
|---|---|---|---|
color | keyof typeof colorVar | "brand" | — |
intensity | number | 20 | Peak opacity of the blob centre, as a percentage (0–100). |
…extends React.ComponentProps<"div">