Logotipo de Volt UI
Volt UI 1.3.1 para Angular 21

Publica interfaces de Angular con componentes que son tuyos.

Copia código Angular pulido y accesible dentro de tu app. Conserva la velocidad de una librería de componentes, con el control de un código que pertenece a tu producto.

npx @voltui/cli add button dialog form-field
<volt-button variant="solid">
  Guardar cambios
</volt-button>
variant
$ npx @voltui/cli add buttonsrc/app/ui/button/button.ts

44

componentes documentados

831

tests automatizados

25

combinaciones de tema

0

NgModules necesarios

Pensado para que sea tuyo

Primero el comportamiento en producción. Después el gusto de producto.

Volt UI parte de ng-primitives para foco, overlays, ARIA y formularios, y lo envuelve en signals de Angular, tokens de Tailwind y código copiable que puedes remodelar.
  1. 01 / 04

    El código es tuyo

    La CLI copia componentes standalone legibles directamente en tu aplicación. Cambia cada línea cuando tu producto lo pida.

    $ npx @voltui/cli add dialog form-field

    ✓ resolved 4 files

    src/app/ui/dialog/dialog.ts

    src/app/ui/dialog/variants.ts

    src/app/ui/form-field/form-field.ts

    src/app/ui/utils.ts

  2. 02 / 04

    Comportamiento incluido

    ng-primitives se encarga del foco, la navegación por teclado, los overlays y los contratos ARIA; Volt UI, del estilo listo para producto.

    Tab↑↓EnterEsc

    role="dialog"

    aria-modal="true"

    aria-expanded="false"

    aria-describedby="volt-hint-1"

  3. 03 / 04

    Diseñado como un sistema

    Los tokens semánticos de Tailwind, los presets de color y los de estilo permiten que un mismo conjunto de componentes adopte un lenguaje visual completo.

    voltembersageduskglacier
    sharpsoftbrutalghostretro
  4. 04 / 04

    Lista para tu agente de IA

    Un comando da a Claude Code, Cursor, Windsurf o Copilot el catálogo de componentes, los selectores y las reglas, para que el código generado use Volt como lo harías tú.

    $ npx @voltui/agent claude

    created .mcp.json

    created .claude/skills/volt-ui/SKILL.md

    Claude CodeCursorWindsurfCopilot
La librería de componentes

Todas las piezas que necesita un producto, ya conectadas.

Formularios, overlays, navegación y visualización de datos: todos listos para teclado, tematizables y tuyos para editar. Se renderizan en vivo.
Laboratorio de temas

Un solo conjunto de componentes. Todos los estilos que tu marca necesita.

Elige una paleta y una forma. Son los presets reales sobre componentes reales de Volt: los mismos tokens que tu app recibe de provideVoltTheme() .

Paleta

Forma

app.config.ts
provideVoltTheme({ color: 'ember', style: 'soft' })

Ajustes del proyecto

Hecho con componentes de Volt UI

ember · soft

Tema público

Cualquiera puede verlo

Progreso de la migración
Sincronía automática
Un comando. Tu código.

Un flujo que acaba en Angular editable, no en dependencia del proveedor.

La CLI resuelve las dependencias entre componentes, escribe archivos legibles y mantiene los selectores coherentes con un flujo centrado en el código.

  1. 01 Instala

    Añade componentes con un solo comando.

    La CLI resuelve las dependencias entre componentes y escribe archivos legibles en src/app/ui . Sin runtime que instalar ni nada que configurar antes.
    terminal
    $ npx @voltui/cli init
$ npx @voltui/cli add dialog form-field

✓ dialog       src/app/ui/dialog
✓ form-field   src/app/ui/form-field
✓ button       src/app/ui/button   (dependency)

  2. 02 Compón

    Úsalos como código Angular que escribiste tú.

    Componentes standalone, inputs con signals y OnPush en todas partes. Impórtalos desde ./ui y se comportan como el resto de tu app.
    settings.page.html
    <!-- imports: [UiFormField, UiLabel, UiInput, UiButton] -->
<ui-form-field>
  <ui-label>Workspace</ui-label>
  <ui-input [(value)]="name" />
</ui-form-field>

<ui-button (click)="save()">Save</ui-button>

  3. 03 Tematiza

    Define la marca una sola vez, al arrancar.

    provideVoltTheme() aplica la paleta, la forma y el modo oscuro en el servidor y en el navegador, así que el primer render ya lleva tu marca.
    app.config.ts
    import { provideVoltTheme } from '@voltui/components';

export const appConfig: ApplicationConfig = {
  providers: [
    provideVoltTheme({ color: 'ember', style: 'soft', dark: false }),
  ],
};

  4. 04 Personaliza

    Cambia cualquier línea. No hay nada que expulsar.

    Las variantes viven en un archivo CVA junto a cada componente y las clases se combinan con cn() . Añade un tamaño, renombra un input, borra lo que no necesites.
    ui/button/variants.ts
    export const buttonVariants = cva('inline-flex items-center', {
  variants: {
    size: {
      sm: 'h-8 px-3 text-sm',
      md: 'h-10 px-4',
      xl: 'h-14 px-8 text-lg', // yours now
    },
  },
});

  5. 05 Automatiza

    Deja que tu agente lo escriba al estilo Volt.

    npx @voltui/agent instala el servidor MCP, una skill y reglas para el editor, para que Claude Code, Cursor o Copilot usen el selector correcto a la primera.
    terminal
    $ npx @voltui/agent claude

Claude Code
  created   .mcp.json
  created   .claude/skills/volt-ui/SKILL.md
  → Restart Claude Code for the MCP server and skill to load.

Construye la interfaz de Angular que querías.

Explora 44 componentes, layouts accesibles, 25 combinaciones de tema y un flujo listo para IA.

Dar una estrella en GitHub