Aurora Background

npx shadcn@latest add https://ui.saasflare.io/r/aurora-background.json

pnpm add @saasflare/ui

"use client"import { AuroraBackground } from "@saasflare/ui"/** Soft multi-color aurora backdrop with centered hero copy. */export function Demo() {    return (        <AuroraBackground className="flex h-64 w-full items-center justify-center rounded-lg border p-12 text-center">            <div>                <h2 className="text-2xl font-bold tracking-tight">Ship faster with Saasflare</h2>                <p className="mt-2 text-sm text-muted-foreground">                    The production-ready starter for your next SaaS.                </p>            </div>        </AuroraBackground>    )}

"use client"import { AuroraBackground } from "@saasflare/ui"/** Opt into brand-rotating blob colors via the `colors` prop. */export function Demo() {    return (        <AuroraBackground            colors={["hsl(var(--primary))", "hsl(var(--chart-2))", "hsl(var(--chart-3))"]}            className="flex h-64 w-full items-center justify-center rounded-lg border p-12 text-center"        >            <div>                <p className="text-xs font-medium uppercase tracking-widest text-muted-foreground">                    Now in public beta                </p>                <h2 className="mt-2 text-2xl font-bold tracking-tight">Built on your brand palette</h2>            </div>        </AuroraBackground>    )}