Introducción

Volt UI es una colección de componentes de Angular reutilizables y accesibles, construidos sobre ng-primitives. Inspirado en shadcn/ui: puedes copiar y personalizar los componentes según lo que necesites.

Herramientas de IA para consumidores

Volt UI incluye tres formas complementarias de dar a los asistentes de IA contexto completo sobre sus componentes, selectores y convenciones.

Skill local →

Detectado automáticamente por OpenCode / Claude Code. Catálogo de componentes, nomenclatura y reglas de uso.

Servidor MCP →

Herramientas MCP alojadas para listar componentes, obtener ejemplos y generar comandos de la CLI.

Referencia de prompt →

Un prompt en un solo archivo para pegar en cualquier chat de LLM y obtener selectores y ejemplos correctos.

Opciones de instalación

Hay dos formas de usar los componentes de Volt UI en tu proyecto:

Opción 1: paquete de npm

Instala la librería directamente desde npm e importa los componentes en tu proyecto.

npm install @voltui/components

@import '@voltui/components/themes.css';

Después importa:from '@voltui/components'

Opción 2: CLI (estilo shadcn)

Copia los archivos fuente de los componentes a tu proyecto con el prefijo ui-*. Personalización total.

npx @voltui/cli init

npx @voltui/cli add button card input

Usa --dry-run para previsualizar los archivos y --force para sobrescribir componentes ya editados.

Opción 3: copiar y pegar

Explora las demos de los componentes y copia el código directamente. Control total sobre la implementación.

Ver componentes →

Convenciones de nombres

Volt UI usa prefijos distintos para el código de la librería y para lo que genera la CLI.

Contexto	Selector	Nombre de clase	Ruta de importación
Código de la librería	volt-* / [voltXxx]	VoltXxx	'volt'
Salida de la CLI	ui-* / [uiXxx]	UiXxx	'./ui/<component>'

Requisitos previos

Antes de usar los componentes de Volt UI, asegúrate de tener instaladas estas dependencias:

paquete de npm

Las dependencias de runtime se incluyen automáticamente. Importa el CSS del tema una vez en tu hoja de estilos global.

npm install @voltui/components @import '@voltui/components/themes.css';

CLI / copiar y pegar — dependencias de runtime npm install ng-primitives class-variance-authority clsx tailwind-merge

Tailwind CSS v4

Los componentes de Volt incluyen el CSS de disposición crítico, así que quien consuma el paquete de npm no necesita una directiva @source para node_modules .

npm install -D tailwindcss @tailwindcss/postcss

Sistema de temas

Volt UI ofrece tokens semánticos de Tailwind mediante custom properties de CSS. Configura el tema en la configuración de tu app.

import { provideVoltTheme } from '@voltui/components';

bootstrapApplication(AppComponent, {
  providers: [
    provideVoltTheme({
      color: 'volt',   // volt | ember | sage | dusk | glacier
      style: 'sharp', // sharp | soft | brutal | ghost | retro
      dark: false
    })
  ]
});

Estructura del proyecto

Al usar la CLI, los componentes se añaden a la carpeta ui de tu proyecto:

src/app/

ui/

button/

button.ts

index.ts

card/

card.ts

index.ts

...

Uso

Tras añadir un componente, impórtalo y úsalo en tus componentes de Angular:

import { UiButton } from './ui/button';

@Component({)

selector: 'app-my-component',

imports: [UiButton],

template: '<ui-button variant="solid">Click me</ui-button>'

})

export class MyComponent { }

Componentes de overlay

Dialog, drawer, popover, tooltip y dropdown-menu usan una directiva de atributo como disparador que referencia un <ng-template> con el contenido de la superposición.

<button [uiDialog]="dialogTpl">Open Dialog</button>

<ng-template #dialogTpl let-close="close">

<h2 uiDialogTitle>Confirm</h2>

<ui-button (click)="close()">Confirm</ui-button>

</div>

</ng-template>

Catálogo de componentes

Todos los componentes de Volt UI 1.0.0 son estables : API asentada, tests que comprueban el comportamiento propio del componente y uso documentado. La etiqueta beta sigue en el sistema para componentes añadidos después de 1.0; hoy no la lleva ninguno. Consulta Versionado y estabilidad para la política completa.

Estable

Recomendado para producción. Tests con sentido, API documentada y cobertura de CVA cuando aplica.

accordion, autofill, avatar, badge, breadcrumbs, button, card, checkbox, combobox, date-picker, dialog, drawer, dropdown-menu, file-upload, form-field, input, input-otp, listbox, meter, native-select, navigation-menu, pagination, popover, progress, radio, range-slider, resizable, search, select, separator, sidebar, skeleton, slider, switch, table, tabs, textarea, theme, toast, toggle, toggle-group, toolbar, tooltip