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

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
Loading...