Search blocks by description or jump to a page.
Alerts ringed by a soft glowing border that draws the eye gently. Use for promotions or new feature notices that need a warm, inviting accent.
Glow Border Alerts shows five alert variants stacked in a single column. Each card carries a bold two-pixel border, a status icon on the left, a title, and a short description line. The variants run in order: a neutral default, a destructive error, a green success, a yellow warning, and a blue informational alert. Hovering any card triggers a smooth shadow transition that casts a colored glow matching the border tone, so the active state is immediately clear without any hard layout shift.
Every alert is independent. You can keep whichever variants your product needs and remove the rest. The copy inside each title and description is plain text, so you can swap in real messages without touching the structure. The icon slot accepts any Lucide icon if you want to signal a different status category.
This block suits status notification panels in a fintech or banking product where the user needs to act on a clear signal quickly. The hover glow gives each severity level a distinct identity without relying on color alone, which helps in dense account dashboards or transaction review screens where multiple notices might appear at once. It is a stronger choice than a plain outlined set when the interface has a dark mode and you want the glow to feel purposeful rather than decorative.
A natural flow around it on a Components page:
Before
After
These alerts work wherever a fintech UI needs to surface account or transaction status at a glance. A few practical fits:
Tip: in a dark themed banking dashboard the glow is most effective when only one alert is visible at a time, so prefer showing the relevant variant dynamically rather than all five at once.