⚡ 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

---

💡 What is Volt UI?

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.

---

✨ Highlights

⚡ Copy, don't couple	CLI copies source into your app — no lock-in, no black-box updates.
♿ Accessible by default	Keyboard, focus, and ARIA behavior delegated to ng-primitives.
🎨 25 theme combinations	5 color × 5 style presets, plus dark mode, driven by Tailwind v4 tokens.
🧩 42 components	Forms, overlays, navigation, data display — see the full catalog.
🛰️ Zoneless & signal-first	input() / output() / model() / computed(), OnPush everywhere.
🤖 AI-ready	Ships an MCP server, a skill, and a prompt reference so assistants use it correctly.

---

🚀 Quick Start

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 {}

🛠️ CLI behavior & flags

• Copies from projects/volt/src/lib into src/app/ui by default.
• Transforms Volt* → Ui* and volt-* → ui-*.
• Detects and copies local component dependencies automatically.
• Refuses to overwrite existing files unless --force is passed.
• --dry-run previews files before writing.
• [target-dir] sets an alternate destination.
• --install installs the required runtime dependencies.

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

Copied components need these runtime dependencies in the target app:

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

---

🎨 Theme System

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.

🌈 Color presets volt ember sage dusk glacier

🖌️ Style presets sharp soft brutal ghost retro

🎛️ Mix and match live in the Theme Builder →

---

🧩 Component Catalog

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

Browse all components

Category	Components
Forms & inputs	input · textarea · checkbox · radio · select · combobox · listbox · switch · slider · toggle · toggle-group · input-otp · form-field · autofill · file-upload · date-picker · search
Actions	button · toolbar
Overlays	dialog · drawer · popover · tooltip · dropdown-menu · toast
Navigation	navigation-menu · breadcrumbs · pagination · tabs · accordion
Data display	table · avatar · badge · card · meter · progress · skeleton · separator
Layout & utility	resizable · sidebar · theme

---

📦 Optional Package Usage

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 })],
});

---

🤖 AI Tools for Consumers

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

Tool	What it is	Install
🧠 Skill	Auto-discovered by Claude Code / OpenCode in a workspace	npx volt-ui-mcp claude
🛰️ MCP server	list_components, get_component, get_usage_example, get_theme_info, generate_cli_command, …	/api/mcp
📋 Prompt reference	Single file to paste into any LLM chat	VOLT_UI_PROMPT.md

---

📈 Stability & Roadmap

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.

Compatibility policy

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.

---

🛠️ Development

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.

---

Built with ⚡ by Andersseen · MIT License

🌐 volt-ui.andersseen.dev

_{↑ Back to top}