Aurora Background

A fully customizable, smooth aurora light background mimicking the northern lights. Configurable via exact hex props alongside automatic integration with the current light or dark mode theme. Accessibility: Respects prefers-reduced-motion (drifting pauses smoothly).

UniqueUI CLI

npx uniqueui add aurora-background

shadcn CLI

npx shadcn@latest add https://uniqueui.com/r/aurora-background.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Cinematic

Variant 1 of 2

Background lights

Vertical pillars drift right → left; soft overlap

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 preset="cinematic" speed={0.95} className="min-h-0 h-full rounded-xl">
        <div className="text-center z-10 w-full px-4">
          <h3 className="text-2xl font-bold mb-2 tracking-tight">Background lights</h3>
          <p className="text-neutral-400 text-sm">Vertical pillars, slow drift</p>
        </div>
      </AuroraBackground>
    </div>
  );
}

Stitch DS

Variant 2 of 2

Stitch DS

Showcase tokens — same motion language

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 preset="stitch" blur={1.05} className="min-h-0 h-full rounded-xl">
        <div className="text-center z-10 w-full px-4">
          <h3 className="text-2xl font-bold mb-2 tracking-tight">Stitch showcase</h3>
          <p className="text-neutral-400 text-sm">Container tokens in motion</p>
        </div>
      </AuroraBackground>
    </div>
  );
}

Props

Prop	Type	Description
`children`	`React.ReactNode`	Content layered above the aurora; keep contrast high on the charcoal base.
`className`	`string`	Classes on the outer container (height, rounding, layout).
`showRadialGradient`	`boolean`	Radial vignette so the hero center stays readable.
`theme`	`"light" \| "dark"`	Dark uses screen blend; light uses multiply and a softer base.
`preset`	`"cinematic" \| "stitch"`	Color story: cinematic (reference-style pillars) or stitch (MCP showcase DS).
`speed`	`number`	Drift speed multiplier; higher = faster horizontal travel.
`blur`	`number`	Blur strength multiplier for the pillar layer.