La CLI local se entrega con el kit; no requiere un paquete publicado en npm. Ejecútala desde el código extraído. El instalador revisa los archivos antes de copiar y protege los existentes salvo que uses --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
Qué se instala
add copia los archivos seleccionados, sus importaciones locales y recursos necesarios, y combina las dependencias npm. Después ejecuta tu gestor de paquetes. init incluye estilos, fuentes locales, controles de paleta y apariencia, MotionSystem y los seis efectos. También copia el generador de tokens, su helper appearance-tokens y src/lib/appearance.ts.
Las imágenes siguen las dependencias del código seleccionado. La CLI local conserva archivos WebP binarios; el registro shadcn 4.22.0 entrega los SVG autónomos como archivos de texto en sus destinos public/assets. Avatar genérico y el paquete mínimo de componentes no necesitan la colección de imágenes generadas.
Seis efectos reutilizables
| Efecto | Uso |
|---|---|
| GradientBackground | Campo de color lineal, radial o mesh estático; sin contexto GPU. |
| ShaderBackground | Fondo WebGL original Aurora, Waves o Iridescent; none desactiva el shader. |
| SpotlightCard | Una luz local sigue el puntero. |
| GlowBorder | Un contorno de color con movimiento opcional. |
| TiltCard | Una superficie se inclina con un puntero preciso. |
| MagneticButton | Un botón se desplaza hacia un puntero cercano. |
Un ejemplo completo de shader
El starter ya contiene estas dependencias. Para otro proyecto ya configurado, añádelas desde el kit y guarda el componente completo de abajo. El grafo local incluye el CSS del efecto, el runtime diferido y los archivos de shaders.
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">
{"Contenido legible en primer plano"}
</h2>
<div className="mt-6 flex flex-wrap gap-3">
<Button
appearance="glass"
aria-pressed={paused}
onClick={() => setPaused((current) => !current)}
>
{paused ? "Reanudar shader" : "Pausar shader"}
</Button>
<Button
appearance="outline"
onClick={() => setAppearance((current) => ({
...current,
motion: current.motion === "off" ? "gentle" : "off",
}))}
>
{appearance.motion === "off"
? "Activar movimiento suave"
: "Desactivar movimiento"}
</Button>
</div>
</ShaderBackground>
</AppearanceScope>
);
}El shader tiene un máximo de 30 FPS. El modo desactivado detiene la animación decorativa; el movimiento reducido del sistema tiene prioridad sobre suave/expresivo. Las pestañas ocultas y efectos fuera de pantalla se pausan; una alternativa CSS mantiene legible el contenido cuando no hay WebGL. paused es una prop real; los controles del ejemplo solo actualizan estado local.
Registro shadcn
# 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
El registro usa el esquema oficial de shadcn y componentes Base UI. Respeta los alias de componentes y lleva las dependencias de código necesarias. La instalación aplica el tema semántico de Aureform; revisa el tema de tu producto si ya está personalizado.
Revisa los cambios antes de instalar
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
Los comandos de vista previa no escriben archivos ni instalan dependencias. Las instalaciones guardan hashes del código de origen y destino en .aureform/manifest.json. Las siguientes instalaciones protegen los archivos personalizados; --overwrite sigue siendo una decisión explícita.
El manifiesto público de descubrimiento compatible con MCP está en https://terrizoaguimor.github.io/aureform-ui/r/registry.json. También puedes servir los archivos public/r incluidos desde tu propio host.
Abrir manifiesto del registroCódigo sin depender de una suscripción