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.

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 add button

Initialize first with: npx @voltui/cli init

Option 3: Copy & Paste

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

Browse Components →

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 — manual deps npm install ng-primitives class-variance-authority

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

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

Next Steps

Themes →

Learn how to customize colors, typography, and dark mode.

Components →

Explore all available components with examples and source code.