CLI

PreviousNext

Use the ZardUI CLI to add beautiful, accessible components to your Angular project with a single command.

Overview

The ZardUI CLI is your gateway to beautiful Angular components. With just one command, you can add professionally designed, fully accessible components to your project.

npx @ngzard/ui init

This command will guide you through an interactive setup:

terminal
terminal
āœ” Choose a theme for your components: ā€ŗ Neutral (Default)
āœ” Where is your global CSS file? ā€¦ src/styles.css
āœ” Configure the import alias for components: ā€¦ src/app/shared/components
āœ” Configure the import alias for utils: ā€¦ src/app/shared/utils
āœ” Your CSS file already has content. This will overwrite everything with ZardUI theme configuration. Continue? ā€¦ yes
āœ” Write configuration to components.json? ā€¦ yes
āœ” Writing configuration...
āœ” Installing dependencies...
āœ” Setting up Tailwind CSS...
āœ” Creating utils...
āœ” Updating tsconfig.json...
 
ZardUI has been initialized successfully!
 
You can now add components using:
  npx @ngzard/ui add [component]

One-Command Setup Get started instantly with automated project configuration, dependency installation, and Tailwind CSS setup.

Smart Integration
Automatically configures TypeScript paths, creates utility functions, and integrates seamlessly with your Angular project.

Modern Toolchain Built for Tailwind CSS v4, Angular 19+, and modern development practices with full TypeScript support.

Installation

Get ZardUI up and running in your Angular project with these simple steps.

Step 1: Initialize your project

Run the init command to set up ZardUI in your Angular project. This will configure Tailwind CSS, install dependencies, and create necessary utility files.

npx @ngzard/ui init

The init command will guide you through an interactive setup:

terminal
terminal
āœ” Choose a theme for your components: ā€ŗ Neutral (Default)
āœ” Where is your global CSS file? src/styles.css
āœ” Configure the import alias for components: src/app/shared/components
āœ” Configure the import alias for utils: src/app/shared/utils
āœ” Write configuration to components.json? yes
āœ” Writing configuration...
āœ” Installing dependencies...
āœ” Setting up Tailwind CSS...
āœ” Creating utils...
āœ” Updating tsconfig.json...
 
ZardUI has been initialized successfully!
 
You can now add components using:
  npx @ngzard/ui add [component]

Step 2: Add components

Start adding components to your project. You can add individual components, multiple components at once, or all available components.

npx @ngzard/ui add button card dialog

Expected output:

āœ“ Ready to install 3 component(s) and 0 dependencies. Proceed? ā€¦ yes
āœ“ Installing dependencies...
āœ“ Added button
āœ“ Added card
āœ“ Added dialog
āœ“ Done!

Step 3: Import and use

Import the components in your Angular modules or standalone components and start using them in your templates.

app.component.ts
app.component.ts
import { ButtonComponent } from '@shared/components/button';
 
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ButtonComponent],
  template: `<z-button>Click me</z-button>`,
})
export class AppComponent {}

Commands

Initialize your project and install dependencies for ZardUI components.

Usage:

npx @ngzard/ui init

Options:

`-y, --yes` - Skip confirmation prompts

Interactive Setup:

When you run the init command, you'll be guided through the following prompts:

āœ” Choose a theme for your components: ā€ŗ Neutral (Default)
āœ” Where is your global CSS file? ā€¦ src/styles.css
āœ” Configure the import alias for components: ā€¦ src/app/shared/components
āœ” Configure the import alias for utils: ā€¦ src/app/shared/utils
āœ” Write configuration to components.json? ā€¦ yes

After answering the prompts, the CLI will:

āœ” Writing configuration...
āœ” Installing dependencies...
āœ” Setting up Tailwind CSS...
āœ” Creating utils...
āœ” Updating tsconfig.json...
 
ZardUI has been initialized successfully!
 
You can now add components using:
  npx @ngzard/ui add [component]

add

Add components to your project with automatic dependency management.

Usage:

npx @ngzard/ui add [components...]

Options:

`-y, --yes` - Skip confirmation prompts
`-o, --overwrite` - Overwrite existing files
`-a, --all` - Add all available components

Examples:

npx @ngzard/ui add button

Add multiple components:

npx @ngzard/ui add button card dialog

Add all available components:

npx @ngzard/ui add --all

Interactive component selection:

npx @ngzard/ui add

Update

Update components in your project while preserving your customizations.

Coming Soon
The ZardUI team is actively working on an intelligent update system that will automatically update your components without compromising the custom rules and modifications you've implemented. This is an extremely complex solution that requires careful design to ensure your customizations remain intact. We appreciate your patience as we develop this feature to provide the best possible experience.

Planned Features

  • šŸ”„
    Smart detection of component changes

    Automatically identify which components have updates available

  • šŸ›”ļø
    Preservation of user customizations

    Keep your custom modifications safe during updates

  • šŸ“Š
    Conflict resolution with clear options

    Visual diff and merge tools to handle conflicts intelligently

  • šŸŽÆ
    Selective component updates

    Choose which components to update and which to skip

  • šŸ“
    Detailed changelog for each update

    See exactly what changed in each component version

What to Expect

When the update command becomes available, it will intelligently analyze your components, detect differences from the latest versions, and offer safe update options that respect your modifications. The system will provide clear visual diffs and allow you to review changes before applying them.

Stay updated:Changelogā€¢ GitHub Repository

Configuration

The CLI stores configuration in components.json in your project root. This file is created automatically when you run npx @ngzard/ui init.

Default Configuration

components.json
components.json
{
  "style": "css",
  "packageManager": "npm",
  "tailwind": {
    "css": "src/styles.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "src/app/shared/components",
    "utils": "src/app/shared/utils"
  }
}

TypeScript Path Mappings

The CLI automatically configures TypeScript path mappings in your tsconfig.json:

tsconfig.json
tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@shared/*": ["src/app/shared/*"]
    }
  }
}

This allows you to import components and utilities using clean paths:

example.component.ts
example.component.ts
import { ButtonComponent } from '@shared/components/button';
import { mergeClasses } from '@shared/utils/merge-classes';