Introduction

Volt UI is a collection of reusable, accessible Angular components built on top of ng-primitives. Inspired by shadcn/ui, you can copy and customize components to match your needs.

AI Tools for Consumers

Volt UI ships with three complementary ways to give AI assistants full context about its components, selectors, and conventions.

Local Skill →

Auto-discovered by OpenCode / Claude Code. Component catalog, naming, and usage rules.

MCP Server →

Hosted MCP tools for listing components, getting examples, and generating CLI commands.

Prompt Reference →

A single-file prompt to paste into any LLM chat for correct selectors and examples.

Installation Options

There are two ways to use Volt UI components in your project:

Option 1: npm package

Install the library directly from npm and import components in your project.

npm install @voltui/components

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

Then import: from '@voltui/components'

Option 2: CLI (shadcn-style)

Copy component source files into your project with ui-* prefix. Full customization.

npx @voltui/cli init

npx @voltui/cli add button card input

Use --dry-run to preview files and --force to overwrite edited components.

Option 3: Copy & Paste

Browse component demos and copy the source code directly. Full control over the implementation.

Browse Components →

Naming Conventions

Volt UI uses different prefixes for library source and CLI-generated output.

Context	Selector	Class name	Import path
Library source	volt-* / [voltXxx]	VoltXxx	'volt'
CLI output	ui-* / [uiXxx]	UiXxx	'./ui/<component>'

Prerequisites

Before using Volt UI components, ensure you have the following dependencies installed:

npm package

Runtime dependencies are included automatically. Import the theme CSS once in your global stylesheet.

npm install @voltui/components @import '@voltui/components/themes.css';

CLI / Copy & Paste — runtime deps npm install ng-primitives class-variance-authority clsx tailwind-merge

Tailwind CSS v4

Volt components ship critical layout CSS, so npm consumers do not need an @source directive for node_modules.

npm install -D tailwindcss @tailwindcss/postcss

Theme System

Volt UI provides semantic Tailwind tokens via CSS custom properties. Configure the theme in your app config.

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

bootstrapApplication(AppComponent, {
  providers: [
    provideVoltTheme({
      color: 'volt',   // volt | ember | sage | dusk | glacier
      style: 'sharp', // sharp | soft | brutal | ghost | retro
      dark: false
    })
  ]
});

Project Structure

When using the CLI, components are added to your project's ui folder:

src/app/

ui/

button/

button.ts

index.ts

card/

card.ts

index.ts

...

Usage

After adding a component, import and use it in your Angular components:

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

@Component({)

selector: 'app-my-component',

imports: [UiButton],

template: '<ui-button variant="solid">Click me</ui-button>'

})

export class MyComponent { }

Overlay Components

Dialog, drawer, popover, tooltip, and dropdown-menu use an attribute-directive trigger that references an <ng-template> containing the overlay content.

<button [uiDialog]="dialogTpl">Open Dialog</button>

<ng-template #dialogTpl let-close="close">

<h2 uiDialogTitle>Confirm</h2>

<ui-button (click)="close()">Confirm</ui-button>

</div>

</ng-template>

Component Catalog

Every component in Volt UI 1.0.0 is stable — a settled API, tests that assert the component's own behavior, and documented usage. The beta label stays in the system for components added after 1.0; nothing carries it today. See Versioning & stability for the full policy.

Stable

Recommended for production use. Meaningful tests, documented API, and CVA coverage where applicable.

accordion, autofill, avatar, badge, breadcrumbs, button, card, checkbox, combobox, date-picker, dialog, drawer, dropdown-menu, file-upload, form-field, input, input-otp, listbox, meter, native-select, navigation-menu, pagination, popover, progress, radio, range-slider, resizable, search, select, separator, sidebar, skeleton, slider, switch, table, tabs, textarea, theme, toast, toggle, toggle-group, toolbar, tooltip