React Fireworks Background

Fireworks! Rockets shoot up from the bottom, leave glowing trails, then burst into 80+ particles that scatter with realistic gravity and friction. Click anywhere to launch a firework toward that spot. By default they auto-launch every 600ms or so, keeping a steady celebration going. The physics feel pretty satisfying—particles arc naturally and fade out as they fall. Great for achievement screens, New Year's pages, product launches, or anywhere you want that celebratory energy. Everything scales based on viewport size so it looks good on any screen.

React Fireworks Background preview

Installation

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

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

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

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

Related Components

FAQ