Shadcn.io is not affiliated with official shadcn/ui
React Beams Background
Animated SVG light beams with cyan to purple gradient, flowing diagonally across the screen for a tech-forward aesthetic
React Beams Background preview
These animated beams give your site that polished, techy feel you see on SaaS landing pages and AI product sites. Twenty curved SVG paths flow diagonally across the screen, each one drawing itself with a cyan-to-purple-to-pink gradient. The staggered timing creates this nice cascading effect where beams continuously fade in and out at different points. I reach for this when a client wants something that screams "modern tech" without being too in-your-face. It works great behind hero text or feature sections.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this background for you — no copy-paste, no CLI:
use shadcnio to install the beams background into my projectRelated Components
Aurora Background
Northern lights gradient effect
Beams Collision
Interactive beam collision effect
Sparkles
Glittering particle effects
Meteors
Falling meteor animation
Paths
Animated SVG path lines
Warp
Hyperspace star field
FAQ
Was this page helpful?
Sign in to leave feedback.