Логотип Volt UI
Volt UI 1.3.1 для Angular 21

Випускайте інтерфейси Angular із компонентів, які належать вам.

Копіюйте відшліфований і доступний код Angular у свій застосунок. Зберігайте швидкість бібліотеки компонентів із контролем над кодом, що належить вашому продукту.

npx @voltui/cli add button dialog form-field
<volt-button variant="solid">
  Зберегти зміни
</volt-button>
variant
$ npx @voltui/cli add buttonsrc/app/ui/button/button.ts

44

задокументованих компонентів

831

автоматичних тестів

25

комбінацій тем

0

потрібних NgModules

Створено, щоб бути вашим

Спершу поведінка у продакшені. Потім смак продукту.

Volt UI починає з ng-primitives для фокуса, оверлеїв, ARIA та форм, а тоді загортає це в сигнали Angular, токени Tailwind і код, який можна копіювати та переробляти.
  1. 01 / 04

    Код належить вам

    CLI копіює читабельні standalone-компоненти просто у ваш застосунок. Змінюйте кожен рядок, коли цього вимагає продукт.

    $ 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

    Поведінка вже всередині

    ng-primitives відповідає за фокус, навігацію клавіатурою, оверлеї та контракти ARIA, а Volt UI — за стилі, готові до продукту.

    Tab↑↓EnterEsc

    role="dialog"

    aria-modal="true"

    aria-expanded="false"

    aria-describedby="volt-hint-1"

  3. 03 / 04

    Спроєктовано як система

    Семантичні токени Tailwind, пресети кольору та стилю дають одному набору компонентів цілу візуальну мову.

    voltembersageduskglacier
    sharpsoftbrutalghostretro
  4. 04 / 04

    Готово для вашого AI-агента

    Одна команда дає Claude Code, Cursor, Windsurf чи Copilot каталог компонентів, селектори й правила, тож згенерований код використовує Volt так, як це зробили б ви.

    $ npx @voltui/agent claude

    created .mcp.json

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

    Claude CodeCursorWindsurfCopilot
Бібліотека компонентів

Усі складники, потрібні продукту, уже з’єднані.

Форми, оверлеї, навігація та відображення даних: усі готові до клавіатури, тематизовані й ваші для редагування. Їх відрендерено наживо.
Пісочниця тем

Один набір компонентів. Будь-який вигляд, потрібний вашому бренду.

Оберіть палітру й форму. Це справжні пресети на справжніх компонентах Volt: ті самі токени, які ваш застосунок отримує від provideVoltTheme() .

Палітра

Форма

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

Налаштування проєкту

Створено з компонентів Volt UI

ember · soft

Публічна тема

Будь-хто може її переглянути

Прогрес міграції
Автосинхронізація
Одна команда. Ваш код.

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

CLI розв’язує залежності між компонентами, пише читабельні файли й тримає селектори узгодженими з процесом, у центрі якого код.

  1. 01 Встановіть

    Додавайте компоненти однією командою.

    CLI розв’язує залежності між компонентами й записує зрозумілі файли в src/app/ui . Жодного рантайму для встановлення й нічого не треба налаштовувати заздалегідь.
    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 Комбінуйте

    Використовуйте їх як власний код Angular.

    Standalone-компоненти, сигнальні inputs і OnPush усюди. Імпортуйте їх із ./ui , і вони поводяться як решта вашого застосунку.
    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 Тема

    Задайте бренд один раз, під час запуску.

    provideVoltTheme() задає палітру, форму й темний режим на сервері та в браузері, тож уже перший рендер виглядає у стилі вашого бренду.
    app.config.ts
    import { provideVoltTheme } from '@voltui/components';

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

  4. 04 Налаштуйте

    Змінюйте будь-який рядок. Нічого не треба «виймати».

    Варіанти лежать у CVA-файлі поруч із кожним компонентом, а класи об’єднуються через cn() . Додайте розмір, перейменуйте input, видаліть зайве.
    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 Автоматизуйте

    Нехай ваш агент пише у стилі Volt.

    npx @voltui/agent встановлює MCP-сервер, skill і правила для редактора, тож Claude Code, Cursor чи Copilot одразу беруть правильний селектор.
    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.

Створіть інтерфейс Angular, який ви хотіли.

Огляньте 44 компонентів, доступні макети, 25 комбінацій тем і процес, готовий до ШІ.

Поставити зірку на GitHub