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 zard-cli initThis command will guide you through an interactive setup:
terminalInitializing ZardUI...
ā Where is your app.config.ts file? ā¦ src/app/app.config.ts
ā Where is your index.html file? ā¦ src/index.html
ā 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...
ZardUI has been initialized successfully!
You can now add components using:
npx zard-cli 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 zard-cli initThe init command will guide you through an interactive setup:
terminalInitializing ZardUI...
ā Where is your app.config.ts file? ā¦ src/app/app.config.ts
ā Where is your index.html file? ā¦ src/index.html
ā 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...
ZardUI has been initialized successfully!
You can now add components using:
npx zard-cli 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 zard-cli add button card dialogExpected output:
ā Ready to install 5 component(s) and 0 dependencies. Proceed? ā¦ yes
ā Added button
ā Added core
ā Added icon
ā 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.tsimport { ButtonComponent } from '@/shared/components/button';
@Component({
selector: 'app-root',
imports: [ButtonComponent],
template: `
<z-button>Click me</z-button>
`,
})
export class AppComponent {}Commands
Initialize your project and install dependencies for ZardUI components.
Usage:
npx zard-cli initOptions:
`-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? ā¦ yesAfter 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 zard-cli add [component]add
Add components to your project with automatic dependency management.
Usage:
npx zard-cli add [components...]Options:
`-y, --yes` - Skip confirmation prompts
`-o, --overwrite` - Overwrite existing files
`-a, --all` - Add all available components
Examples:
npx zard-cli add buttonAdd multiple components:
npx zard-cli add button card dialogAdd all available components:
npx zard-cli add --allInteractive component selection:
npx zard-cli addUpdate
Update components in your project while preserving your customizations.
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.
Configuration
The CLI stores configuration in components.json in your project root. This file is created automatically when you run npx zard-cli init.
Default Configuration
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{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/shared/*": ["src/app/shared/*"]
}
}
}This allows you to import components and utilities using clean paths:
example.component.tsimport { ButtonComponent } from '@/shared/components/button';
import { mergeClasses } from '@/shared/utils/merge-classes';