Shadcn.io is not affiliated with official shadcn/ui
React Background Components
40+ animated background components for React. Particles, gradients, grids, 3D effects. Copy-paste into your Next.js project.
Your hero section deserves better than a static gradient. Users scroll past the same background patterns everywhere—flat colors, basic gradients, maybe a subtle texture. Their eyes glaze over before they read your headline.
These backgrounds create atmosphere. Floating particles that respond to mouse movement. Starfields you fly through. Rain with lightning. Neon that glows. 40+ components, each designed to make your site feel alive without killing performance.
Pick an Effect
Particles & Floating
Floating elements that drift, sparkle, and create depth. From subtle ambient particles to magical fireflies.
Particles
Floating particle system
Sparkles
Twinkling star particles
Fireflies
Glowing summer night
Bokeh
Soft out-of-focus lights
Bubble
Rising floating bubbles
Confetti
Celebration particles
Space & Sky
Cosmic effects from starfields to auroras. Perfect for tech, sci-fi, or dreamy themes.
Starfield
Flying through space
Aurora
Northern lights effect
Meteors
Falling meteor trails
Shooting Stars
Streaking stars
Constellation
Connected star network
Orbits
Orbital ring paths
Weather & Nature
Atmospheric effects that set the mood. Rain, snow, fog, underwater—bring nature to screen.
Rain
Rainfall with lightning
Snow
Gentle snowfall
Fog
Atmospheric mist
Underwater
Caustic light patterns
Fireworks
Explosive celebration
Grids & Patterns
Structured backgrounds from minimal dots to retro perspective grids. Clean and technical.
Grid Pattern
Clean line grid
Dot Pattern
Subtle dot grid
Hexagon
Honeycomb pattern
Flickering Grid
Animated matrix grid
Retro Grid
80s perspective grid
Interactive Grid
Mouse-reactive grid
Gradients & Color
Flowing colors and smooth transitions. From subtle mesh gradients to bold animations.
Mesh Gradient
Stripe/Linear style blobs
Gradient
Flowing gradient shapes
Gradient Animation
Animated color shifts
Vortex
Spiral color flow
Waves & Flow
Smooth flowing lines and wave patterns. Organic motion that feels natural.
Wavy
Flowing wave lines
Light Waves
Ambient wave animation
Wave Grid
3D wave mesh surface
Topography
Contour line map
Paths
Animated path lines
Light & Beams
Light effects from subtle glows to dramatic beams. Draw attention where you need it.
Beams
Light beam rays
Beams Collision
Colliding light beams
Spotlight
Cursor-following glow
Ripple
Expanding light rings
Circles
Animated circle patterns
Tech & Digital
Cyberpunk and digital aesthetics. Matrix rain, glitch effects, neon glow.
Matrix
Digital code rain
Glitch
RGB split distortion
Neon
Glowing neon rings
Warp
Hyperspace tunnel
Boxes
Floating 3D boxes
Using Components
Install with the CLI:
npx shadcn@latest add https://shadcn.io/r/particles.jsonOr copy from the component page directly into your project. Each component is self-contained with all dependencies listed.
Most backgrounds use Canvas or CSS animations. Some use Motion (Framer Motion) for physics. All are optimized for performance with requestAnimationFrame and ResizeObserver.
FAQ
Was this page helpful?
Sign in to leave feedback.