Aureform palette
Aurora
Electric optimism. A bright beginning.
Project momentum
128ideas in motion
| Aurora project momentum | Progress |
|---|---|
| Mon | 28 |
| Tue | 42 |
| Wed | 36 |
| Thu | 64 |
| Fri | 82 |
Dark · Elevated
View complete example
"use client";
import { AppearanceScope } from "@/components/appearance-provider";
import type { AppearanceConfig } from "@/lib/appearance";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Chart } from "@/components/ui/chart";
import { GradientBackground } from "@/components/effects";
function AuroraExample() {
const [project, setProject] = useState("");
const [ready, setReady] = useState(false);
const data = [
{ label: "Mon", value: 28 },
{ label: "Tue", value: 42 },
{ label: "Wed", value: 36 },
{ label: "Thu", value: 64 },
{ label: "Fri", value: 82 },
];
return (
<main className="mx-auto grid max-w-lg gap-4 bg-background p-6 text-foreground">
<GradientBackground kind="mesh" colors={["#8B5CF6","#22D3EE","#34D399"]} angle={125} intensity={0.65} className="rounded-2xl border border-border p-6 [&>.afx-background-field]:[background-image:var(--af-gradient-color)]!">
<Badge variant="outline" className="border-white/25 bg-white/5 text-white">{"Aurora"}</Badge>
<h1 className="mt-8 text-3xl font-semibold tracking-tight">{"Make your next move."}</h1>
<p className="mt-3 text-sm leading-6 text-white/75">{"Electric optimism. A bright beginning."}</p>
</GradientBackground>
<Card appearance="elevated">
<CardHeader><CardTitle>{"Launch overview"}</CardTitle></CardHeader>
<CardContent>
<Chart kind="bar" data={data} height={140} label="Project momentum" valueLabel="Progress" />
<form onSubmit={(event) => { event.preventDefault(); setReady(true); }} className="mt-4 grid gap-3">
<label className="grid gap-2 text-xs font-medium">
{"Project name"}
<Input required value={project} onChange={(event) => { setProject(event.target.value); setReady(false); }} placeholder="Your next great idea" />
</label>
<div className="flex flex-wrap gap-2">
<Button type="submit">{"Create project"}</Button>
<Button type="button" variant="outline" onClick={() => { setProject(""); setReady(false); }}>{"Start again"}</Button>
</div>
{ready && <p role="status" className="text-xs text-primary">{"Your preview is ready."}</p>}
</form>
</CardContent>
</Card>
</main>
);
}
const appearance: AppearanceConfig = {
"version": 1,
"theme": "dark",
"palette": "aurora",
"colors": {
"primary": "#8B5CF6",
"secondary": "#22D3EE",
"tertiary": "#34D399"
},
"material": "elevated",
"radius": 16,
"density": "comfortable",
"typography": "modern",
"motion": "expressive",
"hover": "glow",
"shadow": 0.65,
"border": 0.55,
"gradient": {
"kind": "mesh",
"angle": 125,
"intensity": 0.65,
"stops": [
{
"color": "#8B5CF6",
"position": 0
},
{
"color": "#22D3EE",
"position": 0.5
},
{
"color": "#34D399",
"position": 1
}
]
},
"shader": {
"kind": "aurora",
"speed": 0.2,
"scale": 1,
"intensity": 0.55,
"paused": false
}
};
export default function ConfiguredAuroraExample() {
return (
<AppearanceScope appearance={appearance}>
<AuroraExample />
</AppearanceScope>
);
}