⚡ Volt UI

Modern UI building blocks for Angular

Angular UI atoms that stay out of the way of your product's own design — built on signals,
Tailwind CSS v4, CVA and ng-primitives. Install the package or copy the source.

⚡ v1.1 — Consumer DX

Built from what real apps ran into. class now reliably styles the element you expect on every component, <a voltButton routerLink> replaces <a><volt-button>, forms get sizes and states, toasts and state-driven dialogs no longer need ng-primitives APIs, and Alert + Spinner join the catalog. Fully backwards compatible with 1.0.
See the release notes · upgrade notes · versioning policy

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

Volt UI is an independent Angular component library inspired by shadcn/ui. It provides the atoms — buttons, inputs, cards, badges, tabs, form fields, alerts, overlays — and leaves everything that makes your product yours to your app: layouts, identity, icons, motion, state and domain components.

There are two first-class ways to use it. Pick per project; both are supported for the whole 1.x line.

• 🎨 Restyle through Tailwind v4 tokens and class instead of fighting a theming API.
• ♿ Keyboard, focus and ARIA behavior come from ng-primitives, on the native elements you write.

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.

npm install @voltui/components

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

import { RouterLink } from '@angular/router';
import { VoltCard, VoltCardContent, VoltNativeButton } from '@voltui/components';

@Component({
  selector: 'app-example',
  imports: [RouterLink, VoltCard, VoltCardContent, VoltNativeButton],
  template: `
    <volt-card>
      <volt-card-content class="p-4">
        <a voltButton variant="outline" routerLink="/docs">Documentation</a>
      </volt-card-content>
    </volt-card>
  `,
})
export class ExampleComponent {}

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: `<button uiButton type="submit">Save</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.

44 components across every common surface. Every component is labeled stable or beta — see COMPONENT_STATUS.md.

_{1.0 shipped 42 components, the Answer to the Ultimate Question of Life, the Universe, and Everything. 1.1 added alert and spinner, which ruined the joke exactly as promised. We have made peace with that.}

@voltui/components is a first-class way to use Volt: import the same Volt* components the CLI copies, and get fixes and features through normal semver updates.

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.

Customize with class — on every component it is merged with cn() (tailwind-merge) over the defaults and applied to the element that paints, so <volt-card-content class="p-3"> replaces the default padding and <volt-input class="w-24"> sizes the native input.

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.1.0 — stable. The public API is locked; 1.1 only adds to it.

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.