The local CLI is delivered with the kit; it does not pretend to be a published npm package. Run it from the extracted source. Files are inspected before copying, and existing files are protected unless you request --overwrite.
node bin/aureform.mjs list node bin/aureform.mjs init ../new-app --no-install node bin/aureform.mjs add combobox metric-card --cwd ../new-app node bin/aureform.mjs add button --cwd ../new-app --overwrite node bin/aureform.mjs add --help
What gets installed
add copies the selected source files, their transitive local imports and required static assets, then merges the required npm dependencies. Run your package manager afterwards. init includes styles, local fonts, palette/appearance controls, MotionSystem and all six effects. It also copies the token generator, its appearance-tokens helper and src/lib/appearance.ts.
Image assets follow the selected source dependency graph. The local CLI preserves binary WebP files; the shadcn 4.22.0 registry delivers self-contained SVG wrappers as text files at their public/assets targets. The generic Avatar primitive and minimal component bundle do not require the generated image collection.
Six reusable effects
| Effect | Use |
|---|---|
| GradientBackground | Static linear, radial or mesh color field; no GPU context. |
| ShaderBackground | Original Aurora, Waves or Iridescent WebGL background; none disables the shader. |
| SpotlightCard | A local light follows the pointer. |
| GlowBorder | A colored perimeter with optional motion. |
| TiltCard | A surface tilts on a fine pointer. |
| MagneticButton | A button moves toward a nearby pointer. |
A complete shader example
The starter already contains these dependencies. For an existing configured host, add them from the source kit, then save the complete component below. The local source graph includes the effect CSS, lazy shader runtime and shader source files.
node bin/aureform.mjs add button appearance-provider shader-background --cwd ../my-product # In ../my-product, run your package manager afterwards.
"use client";
import { useState } from "react";
import { AppearanceScope } from "@/components/appearance-provider";
import { ShaderBackground } from "@/components/effects/shader-background";
import { Button } from "@/components/ui/button";
import { createAppearance } from "@/lib/appearance";
export default function ShaderExample() {
const [appearance, setAppearance] = useState(
() => createAppearance("aurora", "dark"),
);
const [paused, setPaused] = useState(false);
return (
<AppearanceScope appearance={appearance}>
<ShaderBackground
{...appearance.shader}
colors={Object.values(appearance.colors)}
paused={paused || appearance.motion === "off"}
className="p-8"
>
<h2 className="text-2xl font-semibold">
{"A readable foreground"}
</h2>
<div className="mt-6 flex flex-wrap gap-3">
<Button
appearance="glass"
aria-pressed={paused}
onClick={() => setPaused((current) => !current)}
>
{paused ? "Resume shader" : "Pause shader"}
</Button>
<Button
appearance="outline"
onClick={() => setAppearance((current) => ({
...current,
motion: current.motion === "off" ? "gentle" : "off",
}))}
>
{appearance.motion === "off"
? "Enable Gentle motion"
: "Motion Off"}
</Button>
</div>
</ShaderBackground>
</AppearanceScope>
);
}Shader draws are capped at 30 FPS. Motion Off disables decorative animation; OS reduced motion overrides Gentle/Expressive. Hidden tabs and offscreen effects pause; a CSS fallback keeps the foreground readable when WebGL is unavailable. paused is a real source prop, and the example’s controls only update local state.
shadcn registry
# Public registry: npx shadcn@4.22.0 add https://terrizoaguimor.github.io/aureform-ui/r/button.json --yes # Or generate and install from local source: pnpm registry npx shadcn@4.22.0 add ./public/r/button.json --yes
The registry uses the documented shadcn schema and Base UI components. It supports configured component aliases and carries source dependencies inline. Aureform’s semantic theme is applied during installation; review your existing theme before adding it to a customized product.
Review changes before installing
node bin/aureform.mjs add data-workbench import-wizard --cwd ../my-product --dry-run node bin/aureform.mjs add data-workbench import-wizard --cwd ../my-product --diff # Review the proposed files, dependencies and conflicts. node bin/aureform.mjs add data-workbench import-wizard --cwd ../my-product
Preview commands do not write files or install dependencies. Successful adds record source and installed-file hashes in .aureform/manifest.json. Later adds protect personalized files; --overwrite remains an explicit choice.
The public MCP-compatible discovery manifest is available at https://terrizoaguimor.github.io/aureform-ui/r/registry.json. You can also serve the included public/r files from your own host.
Open registry manifestSource, without a subscription dependency