Aurora Border FX
Interactive Aurora glow card with live color switcher, dynamic blur, and reactive multi-color borders.
On This Page
Interactive Aurora glow card with live color switcher, dynamic blur, and reactive multi-color borders.
The flagship reactive Aurora glow card from the NexoreUI home page. Features multi-color gradient borders, dynamic atmospheric blur, interactive color switcher bar, and versatile children slot support.
Smooth multi-color conic gradients that dynamically track and react with zero JavaScript canvas lag.
| Prop | Type | Default | Description |
|---|---|---|---|
| color | "violet" | "cyan" | "emerald" | "rose" | "amber" | string | "violet" | Color preset or custom CSS hex color code for the Aurora glow. |
| glow | "none" | "subtle" | "medium" | "strong" | "medium" | Intensity level of the atmospheric radial glow. |
| radius | "sm" | "md" | "lg" | "xl" | "full" | "lg" | Corner radius profile for the outer container and inner elements. |
| showColorPicker | boolean | true | Renders interactive color switcher buttons at top right. |
| badgeText | string | "Aurora Border FX" | Text inside the animated badge pill. |
| title | string | "Reactive Aurora Borders" | Main headline inside the card body. |
| description | string | "Smooth multi-color conic gradients..." | Subtitle or description text explaining the component. |
| colors | AuroraColorOption[] | defaultAuroraColors | Custom array of { name, hex } options for the color switcher. |
| children | React.ReactNode | undefined | Custom children. When provided, replaces the default card interior. |
Smooth multi-color conic gradients that dynamically track and react with zero JavaScript canvas lag.
High-availability cluster uptime