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

🎉 v1.0 is here

42 components. API locked. Semver from here on out.

After nine 0.x minors, the public surface is frozen for the whole 1.x line — inputs, outputs and selectors won't move under you again outside a major.
See the release notes · migration guide · versioning policy

🌐 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 → — generate a contrast-checked palette in one click, or import one from Palette Crafter.

42 components across every common surface — which is, of course, the Answer to the Ultimate Question of Life, the Universe, and Everything. 🐋 The v1 surface is now fixed and every component is labeled stable or beta — see COMPONENT_STATUS.md.

_{Deep Thought needed 7½ million years to arrive at 42. We needed nine 0.x minors, which is arguably worse. Don't panic: shipping a 43rd component in some future minor will ruin this joke, and we've made peace with that.}

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: 1.0.0 — stable. The public API is locked.

Component inputs, outputs, and selectors follow semantic versioning as of 1.0.0: breaking changes only happen in a major version bump, new features land in minors, and fixes land in patches. If you're upgrading from a 0.x release, see MIGRATION.md for the full 0.x → 1.0 upgrade guide (the three aliases it documents as removed in 1.0.0 are gone as of this release) and specs/api-freeze-0.9.md for the frozen pre-1.0 API reference this release shipped against.

• Stable — recommended for production use.
• Beta — usable; may still gain forms / keyboard / a11y / edge-case coverage before moving to stable, but its public API won't change outside a major bump.
• Experimental — reserved for future previews. Not currently used — every shipped component is stable or beta as of 1.0.0.

All components remain available through the package and CLI; the status label communicates confidence, not availability. See docs/versioning for the full semver promise and support policy.

Full status table: COMPONENT_STATUS.md.

The 1.x line targets Angular ^21.2 and Node 20 or newer. Volt UI supports the latest declared Angular major only; widening that range requires consumer-fixture verification and is never assumed from a successful build. Each supported Angular major is documented with migration notes or release notes before a major is dropped.

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.