Stars

PreviousNext

A minimalist animated stars background component for React. It creates a smooth and subtle starfield animation behind your content, perfect for landing pages, portfolios, or any section that needs a cosmic touch.

Docs
bunduicomponent

Preview

Loading preview…
examples/motion/backgrounds/stars/01/page.tsx
import { Button } from "@/components/ui/button";
import { StarsBackground } from "./stars";

export default function StarsBackgroundExample() {
  return (
    <StarsBackground className="flex aspect-16/9 items-center justify-center">
      <div className="z-10 space-y-4 text-center lg:space-y-6">
        <h4 className="text-2xl font-semibold text-black/80 lg:text-3xl dark:text-white/80">
          Bundui Components
        </h4>
        <Button>Discover Excellence</Button>
      </div>
    </StarsBackground>
  );
}

Installation

npx shadcn@latest add @bundui/stars

Usage

import { Stars } from "@/components/stars"
<Stars />