Aurora Background

Flowing aurora borealis gradient animation using layered blurred blobs.

npx uniqueui add aurora-background

Preview

Aurora Background

Beautiful animated gradients

Usage

import { AuroraBackground } from "@/components/ui/aurora-background";

export default function Example() {
  return (
    <div className="rounded-xl overflow-hidden border border-neutral-800 h-[400px] w-full relative text-white">
      <AuroraBackground className="min-h-0 h-full rounded-xl">
        <div className="text-center z-10 w-full">
          <h3 className="text-3xl font-bold mb-2 tracking-tight">Aurora Background</h3>
          <p className="text-neutral-400">Beautiful animated gradients</p>
        </div>
      </AuroraBackground>
    </div>
  );
}

Props

Prop	Type	Description
`children`	`React.ReactNode`	Content elements layered above the animated aurora gradient background.
`className`	`string`	Additional CSS configuration applied to the background container.
`showRadialGradient`	`boolean`	Apply a radial vignette mask to focus attention towards the center.