Aurora Background

Pro

Slow-moving blurred blob aurora background with configurable palette, speed, and blur radius. Wraps any content.

Pro component — requires an active license. Get access →

Aurora Background

Installation

Add your token to .env

Get a token from your dashboard, then add it to .env:

bash

PARTICLEUI_TOKEN=your-token-here

Add the registry to components.json

Wire up the authenticated registry so the CLI can resolve Pro components:

bash

"registries": {
  "@particleui": {
    "url": "https://particleui.dev/r/react/{name}.json",
    "headers": { "Authorization": "Bearer ${PARTICLEUI_TOKEN}" }
  }
}

Run the CLI

bash

npx particleui-cli add aurora-background

Usage

TSX

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

export default function Example() {
  return (
    <AuroraBackground className="h-screen w-full bg-background">
      <div className="relative z-10 flex h-full items-center justify-center">
        <h1 className="text-4xl font-bold">Your content here</h1>
      </div>
    </AuroraBackground>
  )
}

Props

Prop	Type	Default	Required
colors	string[]	—	no
speed	"slow" \| "medium" \| "fast"	`"medium"`	no
blur	number	`80`	no

Details

Source filecomponents/ui/aurora-background.tsx

Typeui

Categoriesbackground, animations

npm dependencies

Registry deps

Claude skill—