Sparkles Bg: Free React + Tailwind Component

A starfield background drawn on a 2D canvas, where every star twinkles on its own sine wave. Density and color are both adjustable, and the star count is derived automatically from the container's area.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add sparkles-bg.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Sparkle densitydensity

Flicker speedspeed

Max sparkle radiusmaxSize

1.6

Sparkle colorcolor

Background colorbackground

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<SparklesBg/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/sparkles-bg.en.json

Or, once registries are configured in components.json, install it as @webberui/sparkles-bg.

Usage

import { SparklesBg } from "@/components/ui/sparkles-bg";

<SparklesBg density={1.4} color="#ffffff" background="#050506" className="h-[320px] w-full rounded-xl">
  <div className="flex h-full items-center justify-center text-white">
    Sparkles
  </div>
</SparklesBg>

Props

Prop	Type	Default	Description
`density`	`number`	`1`	Star density multiplier; the total is derived from the container's area
`color`	`string`	`"#ffffff"`	Star color; accepts any CSS color value
`minSize`	`number`	`0.6`	Minimum star radius (px)
`maxSize`	`number`	`1.6`	Maximum star radius (px)
`speed`	`number`	`1`	Twinkle speed multiplier; `1` is the default cadence
`background`	`string`	`"transparent"`	Background color; set `transparent` to layer it over an existing base color
`children`	`ReactNode`	—	Foreground content layered above the stars

Accessibility

When the user has "reduce motion" enabled at the system level, the stars are drawn statically once and no longer twinkle
The canvas carries aria-hidden and pointer-events-none — decorative only, so it interferes with neither interaction nor announcement

Sparkles Bg