Shadcn.io is not affiliated with official shadcn/ui
React Aurora Background
Animated aurora borealis background with flowing emerald and teal gradients, perfect for hero sections and landing pages
You know that magical feeling when you see the northern lights? This component brings that same vibe to your React app. The aurora flows smoothly across the screen in beautiful emerald and teal waves, creating an eye-catching backdrop that doesn't distract from your content. It's built entirely with CSS animations—no heavy animation libraries needed—so it runs silky smooth at 60fps without breaking a sweat. I've used this on hero sections and landing pages where I needed something more interesting than a static gradient, but didn't want to go overboard. The cool thing is you can dial the animation speed up or down depending on the mood you're going for.
React Aurora Background preview
Installation
Related Components
Background Beams
Animated gradient beam lines
Background Gradient
Customizable gradient backdrop
Wavy Background
Animated wave pattern background
Bubble Background
Interactive floating bubbles
Gradient Animation
Psychedelic gradient mesh
Light Waves
Flowing light wave animation
FAQ
Was this page helpful?
Sign in to leave feedback.