Volt UI Logo
Volt UI 1.3.1 for Angular 21

Ship Angular interfaces from components you can own.

Copy polished, accessible Angular source into your app. Keep the speed of a component library, with the control of code that belongs to your product.

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

44

documented components

831

automated tests

25

theme combinations

0

NgModules required

Built for ownership

Production behavior first. Product taste next.

Volt UI starts with ng-primitives for focus, overlays, ARIA and forms, then wraps it in Angular signals, Tailwind tokens, and copyable source you can reshape.
  1. 01 / 04

    Own the source

    The CLI copies readable standalone components directly into your application. Change every line when your product needs it.

    $ 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

    Behavior built in

    ng-primitives handles focus, keyboard navigation, overlays, and ARIA contracts while Volt UI handles product-ready styling.

    Tab↑↓EnterEsc

    role="dialog"

    aria-modal="true"

    aria-expanded="false"

    aria-describedby="volt-hint-1"

  3. 03 / 04

    Designed as a system

    Semantic Tailwind tokens, colour presets, and style presets let one component set adapt to a complete visual language.

    voltembersageduskglacier
    sharpsoftbrutalghostretro
  4. 04 / 04

    Ready for your AI agent

    One command gives Claude Code, Cursor, Windsurf or Copilot the component catalog, the selectors and the rules, so generated code uses Volt the way you would.

    $ npx @voltui/agent claude

    created .mcp.json

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

    Claude CodeCursorWindsurfCopilot
The component library

Every piece a product needs, already wired.

Forms, overlays, navigation and data display: each one keyboard-ready, themeable and yours to edit. These are rendered live.
Theme playground

One set of components. Every look your brand needs.

Pick a palette and a shape. These are the real presets on real Volt components: the same tokens your app gets from provideVoltTheme() .

Palette

Shape

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

Project settings

Built with Volt UI components

ember · soft

Public theme

Anyone can preview it

Migration progress
Auto-sync
One command. Your source.

A workflow that ends in editable Angular, not vendor lock-in.

The CLI resolves component dependencies, writes readable files, and keeps selectors consistent with the source-first workflow.

  1. 01 Install

    Add components with one command.

    The CLI resolves the dependencies between components and writes readable files into src/app/ui . No runtime to install, nothing to configure first.
    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 Compose

    Use them like Angular code you wrote.

    Standalone components, signal inputs and OnPush everywhere. Import them from ./ui and they behave like the rest of your 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 Theme

    Set the brand once, at bootstrap.

    provideVoltTheme() sets the palette, the shape and dark mode on the server and in the browser, so the first paint is already on brand.
    app.config.ts
    import { provideVoltTheme } from '@voltui/components';

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

  4. 04 Customize

    Change any line. There is nothing to eject.

    Variants live in a CVA file next to each component, and classes merge through cn() . Add a size, rename an input, delete what you don't need.
    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 Automate

    Let your agent write it the Volt way.

    npx @voltui/agent installs the MCP server, a skill and editor rules, so Claude Code, Cursor or Copilot reach for the right selector the first time.
    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.

Build the Angular interface you wanted.

Explore 44 components, accessible layouts, 25 theme combinations, and an AI-ready workflow.

Star on GitHub