⚡ Volt UI

Modern UI building blocks for Angular

Copy-and-own Angular components built on signals, Tailwind CSS v4, CVA,
and ng-primitives — accessible, themeable, and yours to edit.

🌐 Live Docs · 📦 Components · 🎨 Theme Builder · 🤖 AI / MCP · 📖 Docs

Volt UI is an independent Angular component library inspired by shadcn/ui — not a closed, versioned dependency you install and hope stays out of your way, but a source-ownership workflow:

npx @voltui/cli add button

• 📥 The CLI copies the component source into your project.
• ✍️ The copied files become your code — edit markup, styles, behavior, variants.
• 🎨 Restyle through Tailwind v4 tokens instead of fighting a theming API.
• 📦 Reach for the npm package only when you deliberately want shared themes/utilities.

Why it exists — Angular has strong headless and enterprise UI options, but few focused on the shadcn-style "copy the component and own it" workflow. Volt UI fills that gap with modern Angular 21 patterns: standalone components, OnPush, signals, zoneless compatibility, ng-primitives accessibility behavior, and Tailwind v4 tokens.

Naming note: this project is not affiliated with PrimeVue Volt UI. Here, Volt UI is an independent Angular implementation for the @voltui packages and CLI.

Initialize a local UI folder, then add components:

# Scaffold ./src/app/ui
npx @voltui/cli init

# Add components (dependencies are copied automatically)
npx @voltui/cli add button card dialog

Use the copied components from your app:

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

@Component({
  selector: 'app-example',
  imports: [UiButton],
  template: `<ui-button>Save</ui-button>`,
})
export class ExampleComponent {}

npx @voltui/cli add button card ./src/app/shared/ui --dry-run
npx @voltui/cli add button card ./src/app/shared/ui --force --install

npm install ng-primitives class-variance-authority clsx tailwind-merge

Themes are CSS custom properties mapped into Tailwind v4 via @theme inline. Components use semantic utilities (bg-primary, text-foreground, rounded-md, shadow-sm) instead of hard-coded var() utilities — so a preset swap restyles everything.

🎛️ Mix and match live in the Theme Builder →

42 components across every common surface. The v1 surface is now fixed and every component is labeled stable or beta — see COMPONENT_STATUS.md.

The @voltui/components package exists for themes, utilities, and advanced consumers who deliberately want package-owned imports. It is not the default for teams who want source ownership.

npm install @voltui/components

Import themes once — that single line is all Tailwind v4 needs:

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

The theme CSS self-registers the compiled component bundle as a @source, so every utility class the components use is generated automatically. It also aligns Tailwind's dark: variant with the .dark class Volt toggles.

Provide a theme at bootstrap:

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

bootstrapApplication(AppComponent, {
  providers: [provideVoltTheme({ color: 'volt', style: 'sharp', dark: false })],
});

Volt UI ships three complementary ways to give AI assistants correct context:

Current status: 0.9.0 — release candidate. The public API is frozen for 1.0.

Component inputs, outputs, and selectors will not change again before 1.0.0, except for the removal of a small set of deprecated aliases — see MIGRATION.md for the full 0.x → 1.0 upgrade guide and specs/api-freeze-0.9.md for the complete frozen API reference.

• Stable — recommended for early adoption.
• Beta — usable; may still gain forms / keyboard / a11y / edge-case coverage.
• Experimental — published for feedback; may change before v1.

All components remain available through the package and CLI; the status label communicates confidence, not availability. Now that the API is frozen, remaining pre-1.0 releases are limited to bug fixes and the deprecation removals documented in MIGRATION.md — no further breaking renames are planned. After v1, breaking changes move to majors.

Full status table: COMPONENT_STATUS.md.

The current 0.9.x line targets Angular ^21.2 and Node 20 or newer. During pre-v1, Volt UI supports the latest declared Angular major only; widening that range requires consumer-fixture verification and is never assumed from a successful build. After v1, the project will document each supported Angular major and provide migrations or release notes before dropping one.

Coverage is measured against the complete library source, CLI core and hosted MCP route. Every component family requires a real behavior spec, while overlays and keyboard workflows are additionally exercised in Playwright.

pnpm install        # install dependencies
pnpm dev            # docs app (AnalogJS + Vite)
pnpm typecheck      # type check
pnpm lint           # lint
pnpm test:run       # unit tests (Vitest)
pnpm build:lib      # build the Angular library
pnpm test:e2e:ci    # Playwright e2e
pnpm manifest       # regenerate the CLI manifest after component changes

CI and deployment run through a single pipeline (.github/workflows/ci.yml): every PR runs lint · typecheck · test · build · e2e, and a merge to main deploys the docs to Cloudflare Pages.

See CONTRIBUTING.md and AGENTS.md for conventions.