React Sparkles Background

Tiny light points drifting and twinkling across the screen—that magical sparkle dust effect. This uses the tsparticles engine (the slim bundle to keep things lightweight) for efficient canvas rendering. Particles fade in and out with random opacity animation, creating that classic star-twinkle look. The particle count is density-based (per 400×400px area), so it scales naturally with container size. Click anywhere to spawn a few extra particles. The whole thing fades in smoothly once initialized. Good for premium product pages, holiday themes, fantasy game UIs, or anywhere you want that touch of magic.

React Sparkles Background preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/sparkles.json

npx shadcn@latest add https://www.shadcn.io/r/sparkles.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/sparkles.json

bunx shadcn@latest add https://www.shadcn.io/r/sparkles.json

Related Components

FAQ