Вступ

Volt UI — це набір багаторазових доступних компонентів Angular, побудованих на ng-primitives. Натхненний shadcn/ui: компоненти можна копіювати та змінювати під свої потреби.

Інструменти ШІ для користувачів

Volt UI пропонує три взаємодоповнювальні способи дати ШІ-асистентам повний контекст про свої компоненти, селектори та домовленості.

Локальний skill →

Автоматично виявляється OpenCode / Claude Code. Каталог компонентів, найменування та правила використання.

Сервер MCP →

Розміщені інструменти MCP для переліку компонентів, отримання прикладів і генерування команд CLI.

Довідник промптів →

Промпт в одному файлі, який можна вставити в будь-який чат LLM, щоб отримати правильні селектори та приклади.

Варіанти встановлення

Є два способи використати компоненти Volt UI у вашому проєкті:

Варіант 1: пакет npm

Встановіть бібліотеку напряму з npm та імпортуйте компоненти у своєму проєкті.

npm install @voltui/components

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

Далі імпортуйте:from '@voltui/components'

Варіант 2: CLI (у стилі shadcn)

Скопіюйте вихідні файли компонентів у проєкт із префіксом ui-*. Повне налаштування.

npx @voltui/cli init

npx @voltui/cli add button card input

Використовуйте --dry-run , щоб побачити файли наперед, і --force , щоб перезаписати вже змінені компоненти.

Варіант 3: копіювати та вставити

Перегляньте демо компонентів і скопіюйте код напряму. Повний контроль над реалізацією.

Переглянути компоненти →

Домовленості щодо назв

Volt UI використовує різні префікси для коду бібліотеки та для того, що генерує CLI.

Контекст	Селектор	Назва класу	Шлях імпорту
Код бібліотеки	volt-* / [voltXxx]	VoltXxx	'volt'
Вивід CLI	ui-* / [uiXxx]	UiXxx	'./ui/<component>'

Передумови

Перш ніж використовувати компоненти Volt UI, переконайтеся, що встановлено такі залежності:

пакет npm

Залежності часу виконання додаються автоматично. Імпортуйте CSS теми один раз у глобальному файлі стилів.

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

CLI / копіювання — залежності часу виконання npm install ng-primitives class-variance-authority clsx tailwind-merge

Tailwind CSS v4

Компоненти Volt містять критичний CSS компонування, тож користувачам npm-пакета не потрібна директива @source для node_modules .

npm install -D tailwindcss @tailwindcss/postcss

Система тем

Volt UI надає семантичні токени Tailwind через CSS custom properties. Налаштуйте тему у конфігурації застосунку.

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
    })
  ]
});

Структура проєкту

При використанні CLI компоненти додаються до теки ui вашого проєкту:

src/app/

ui/

button/

button.ts

index.ts

card/

card.ts

index.ts

...

Використання

Після додавання компонента імпортуйте та використайте його у своїх компонентах 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 { }

Компоненти-оверлеї

Dialog, drawer, popover, tooltip і dropdown-menu використовують директиву-атрибут як тригер, що посилається на <ng-template> із вмістом накладки.

<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>

Каталог компонентів

Кожен компонент у Volt UI 1.0.0 є стабільним : усталений API, тести, що перевіряють власну поведінку компонента, і задокументоване використання. Позначка бета лишається в системі для компонентів, доданих після 1.0; сьогодні її не має жоден. Дивіться Версіонування та стабільність щодо повної політики.

Стабільний

Рекомендовано для продакшену. Змістовні тести, задокументований API і покриття CVA там, де це доречно.

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