React Starfield Background

Flying through an endless field of stars—that classic sci-fi hyperspace feel. Stars start small in the center and rush outward as they "approach" you, creating convincing 3D depth. Closer stars move faster and appear brighter, distant ones are dim and slow. Some stars twinkle subtly. It's hypnotic and immersive without being overwhelming. Canvas-based with efficient z-depth sorting. Great for space themes, sci-fi products, astronomy sites, or anywhere you want that sense of infinite journey through the cosmos.

React Starfield Background preview

Installation

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

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

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

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

Related Components

FAQ