ZardUI

https://zardui.com/docs
Admin
ZardUI is an open-source Angular component library built with TailwindCSS, inspired by shadcn/ui,...
Tokens:215,530
Snippets:986
Trust Score:6
Update:3 months ago
Show doc for...
Tokens:
Raw
### Interactive ZardUI Initialization

Source: https://zardui.com/docs/cli

The init command guides you through an interactive setup process, asking for file paths, theme preferences, and configuration details.

```bash
Initializing 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]
```

--------------------------------

### Basic Layout Examples

Source: https://zardui.com/docs/components/layout

Demonstrates various configurations of Z-UI layout components, including header, content, footer, and sidebar arrangements. Use these examples to understand the fundamental structure and placement of layout elements.

```typescript
import { ChangeDetectionStrategy, Component } from '@angular/core';
 
import { LayoutImports } from '@/shared/components/layout/layout.imports';
 
@Component({
  selector: 'z-demo-layout-basic',
  imports: [LayoutImports],
  template: '
    <div class="flex flex-col gap-6 text-center">
      <z-layout class="overflow-hidden rounded-lg">
        <z-header class="h-16 justify-center border-0 bg-[#4096ff] px-12 text-white">Header</z-header>
        <z-content class="min-h-50 bg-[#0958d9] text-white">Content</z-content>
        <z-footer class="h-16 justify-center border-0 bg-[#4096ff] px-12 text-white">Footer</z-footer>
      </z-layout>
 
      <z-layout class="overflow-hidden rounded-lg">
        <z-header class="h-16 justify-center border-0 bg-[#4096ff] px-12 text-white">Header</z-header>
        <z-layout>
          <z-sidebar class="border-0 bg-[#1677ff] text-white" [zWidth]="120">Sidebar</z-sidebar>
          <z-content class="min-h-50 bg-[#0958d9] text-white">Content</z-content>
        </z-layout>
        <z-footer class="h-16 justify-center border-0 bg-[#4096ff] px-12 text-white">Footer</z-footer>
      </z-layout>
 
      <z-layout class="overflow-hidden rounded-lg">
        <z-header class="h-16 justify-center border-0 bg-[#4096ff] px-12 text-white">Header</z-header>
        <z-layout>
          <z-content class="min-h-50 bg-[#0958d9] text-white">Content</z-content>
          <z-sidebar class="border-0 bg-[#1677ff] text-white" [zWidth]="120">Sidebar</z-sidebar>
        </z-layout>
        <z-footer class="h-16 justify-center border-0 bg-[#4096ff] px-12 text-white">Footer</z-footer>
      </z-layout>
 
      <z-layout class="overflow-hidden rounded-lg">
        <z-sidebar class="border-0 bg-[#1677ff] text-white" [zWidth]="120">Sidebar</z-sidebar>
        <z-layout>
          <z-header class="h-16 justify-center border-0 bg-[#4096ff] px-12 text-white">Header</z-header>
          <z-content class="min-h-50 bg-[#0958d9] text-white">Content</z-content>
          <z-footer class="h-16 justify-center border-0 bg-[#4096ff] px-12 text-white">Footer</z-footer>
        </z-layout>
      </z-layout>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LayoutDemoBasicComponent {}
```

--------------------------------

### Add Project Dependencies (bun)

Source: https://zardui.com/docs/installation/angular

Install the necessary dependencies for zard/ui using bun. Ensure you have bun installed and configured.

```bash
bun add @angular/cdk class-variance-authority clsx tailwind-merge tailwindcss-animate @ng-icons/core @ng-icons/lucide
```

--------------------------------

### Install Tooltip Component via CLI

Source: https://zardui.com/docs/components/tooltip

Use the Zard CLI to add the tooltip component to your project. This command-line interface simplifies the setup process.

```bash
npx zard-cli@latest add tooltip
```

```bash
pnpm dlx zard-cli@latest add tooltip
```

```bash
yarn dlx zard-cli@latest add tooltip
```

```bash
bunx zard-cli@latest add tooltip
```

--------------------------------

### Install Zard Skeleton Component CLI

Source: https://zardui.com/docs/components/skeleton

Instructions for installing the Zard Skeleton component using the Zard CLI with npm, pnpm, yarn, or bun.

```bash
npx zard-cli@latest add skeleton
```

```bash
pnpm dlx zard-cli@latest add skeleton
```

```bash
yarn dlx zard-cli@latest add skeleton
```

```bash
bunx zard-cli@latest add skeleton
```

--------------------------------

### Install Select Component using bun

Source: https://zardui.com/docs/components/select

Use the Zard CLI with bun to add the select component to your project.

```bash
bunx zard-cli@latest add select

```

--------------------------------

### Install Select Component using npm

Source: https://zardui.com/docs/components/select

Use the Zard CLI with npm to add the select component to your project.

```bash
npx zard-cli@latest add select

```

--------------------------------

### Install Select Component using pnpm

Source: https://zardui.com/docs/components/select

Use the Zard CLI with pnpm to add the select component to your project.

```bash
pnpm dlx zard-cli@latest add select

```

--------------------------------

### Add Project Dependencies (npm)

Source: https://zardui.com/docs/installation/angular

Install the necessary dependencies for zard/ui using npm. Ensure you have npm installed and configured.

```bash
npm install @angular/cdk class-variance-authority clsx tailwind-merge tailwindcss-animate @ng-icons/core @ng-icons/lucide
```

--------------------------------

### Install Switch Component with CLI (bun)

Source: https://zardui.com/docs/components/switch

Use the Zard CLI with bun to add the switch component to your project.

```bash
bunx zard-cli@latest add switch
```

--------------------------------

### Install Toggle Component using bun

Source: https://zardui.com/docs/components/toggle

Use the Zard CLI with bun to add the toggle component to your project.

```bash
bunx zard-cli@latest add toggle
```

--------------------------------

### Install Form Component using bun

Source: https://zardui.com/docs/components/form

Use bun to add the form component to your project.

```bash
bunx zard-cli@latest add form
```

--------------------------------

### Install Table Component with bun

Source: https://zardui.com/docs/components/table

Use bun to add the table component to your project.

```bash
bunx zard-cli@latest add table
```

--------------------------------

### Install Table Component with npm

Source: https://zardui.com/docs/components/table

Use npm to add the table component to your project.

```bash
npx zard-cli@latest add table
```

--------------------------------

### Install Select Component using yarn

Source: https://zardui.com/docs/components/select

Use the Zard CLI with yarn to add the select component to your project.

```bash
yarn dlx zard-cli@latest add select

```

--------------------------------

### Install Toggle Component using npm

Source: https://zardui.com/docs/components/toggle

Use the Zard CLI with npm to add the toggle component to your project.

```bash
npx zard-cli@latest add toggle
```

--------------------------------

### Install Toggle Component using pnpm

Source: https://zardui.com/docs/components/toggle

Use the Zard CLI with pnpm to add the toggle component to your project.

```bash
pnpm dlx zard-cli@latest add toggle
```

--------------------------------

### Install Switch Component with CLI (pnpm)

Source: https://zardui.com/docs/components/switch

Use the Zard CLI with pnpm to add the switch component to your project.

```bash
pnpm dlx zard-cli@latest add switch
```

--------------------------------

### Install Switch Component with CLI (yarn)

Source: https://zardui.com/docs/components/switch

Use the Zard CLI with yarn to add the switch component to your project.

```bash
yarn dlx zard-cli@latest add switch
```

--------------------------------

### Initialize Zard/ui with npm

Source: https://zardui.com/docs/installation/angular

Prepare your project for Zard/ui components using the Zard CLI with npm as the package manager.

```bash
npx zard-cli@latest init
```

--------------------------------

### Initialize Zard/ui with bun

Source: https://zardui.com/docs/installation/angular

Prepare your project for Zard/ui components using the Zard CLI with bun as the package manager.

```bash
bunx zard-cli@latest init
```

--------------------------------

### Install Slider Component via CLI

Source: https://zardui.com/docs/components/slider

Use the Zard CLI to add the slider component to your project. This command-line interface simplifies the setup process.

```bash
npx zard-cli@latest add slider
```

```bash
pnpm dlx zard-cli@latest add slider
```

```bash
yarn dlx zard-cli@latest add slider
```

```bash
bunx zard-cli@latest add slider
```

--------------------------------

### Angular Reactive Form Example

Source: https://zardui.com/docs/components/form

This component demonstrates a typical reactive form setup in Angular. It includes form group definition, input fields with validation, and a submit handler. Ensure `ReactiveFormsModule` is imported.

```typescript
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';

import { ZardButtonComponent } from '@/shared/components/button';
import { ZardFormImports } from '@/shared/components/form/form.imports';
import { ZardInputDirective } from '@/shared/components/input';

@Component({
  selector: 'zard-demo-form-reactive',
  imports: [ReactiveFormsModule, ZardButtonComponent, ZardInputDirective, ZardFormImports],
  template: `
    <form [formGroup]="profileForm" (ngSubmit)="onSubmit()" class="max-w-sm space-y-6">
      <z-form-field>
        <label for="username" z-form-label zRequired>Username</label>
        <z-form-control>
          <input id="username" z-input type="text" placeholder="Choose a username" formControlName="username" />
        </z-form-control>
        <z-form-message zType="default">Username must be 3-20 characters long.</z-form-message>
      </z-form-field>

      <z-form-field>
        <label for="email" z-form-label zRequired>Email</label>
        <z-form-control>
          <input id="email" z-input type="email" placeholder="Enter your email" formControlName="email" />
        </z-form-control>
        <z-form-message zType="default">We'll use this for account notifications.</z-form-message>
      </z-form-field>

      <z-form-field>
        <label for="password" z-form-label zRequired>Password</label>
        <z-form-control>
          <input id="password" z-input type="password" placeholder="Create a password" formControlName="password" />
        </z-form-control>
        <z-form-message zType="default">Password must be at least 6 characters.</z-form-message>
      </z-form-field>

      <button z-button zType="default" type="submit" [zDisabled]="profileForm.invalid">Create Account</button>
    </form>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
})
export class ZardDemoFormReactiveComponent {
  profileForm = new FormGroup({
    username: new FormControl('', [Validators.required, Validators.minLength(3), Validators.maxLength(20)]),
    email: new FormControl('', [Validators.required, Validators.email]),
    password: new FormControl('', [Validators.required, Validators.minLength(6)]),
  });

  onSubmit() {
    if (this.profileForm.valid) {
      console.log('Form submitted:', this.profileForm.value);
    }
  }
}

```

--------------------------------

### Initialize Zard/ui with pnpm

Source: https://zardui.com/docs/installation/angular

Prepare your project for Zard/ui components using the Zard CLI with pnpm as the package manager.

```bash
pnpm dlx zard-cli@latest init
```

--------------------------------

### Install ngx-sonner dependency (bun)

Source: https://zardui.com/docs/components/toast

Install the ngx-sonner package using bun, which is a dependency for the toast component.

```bash
bun add ngx-sonner

```

--------------------------------

### Add All Components (npm)

Source: https://zardui.com/docs/cli

Add all available ZardUI components to your project using npm. Use the --all flag for a comprehensive installation.

```bash
npx zard-cli add --all
```

--------------------------------

### Install ngx-sonner dependency (yarn)

Source: https://zardui.com/docs/components/toast

Install the ngx-sonner package using yarn, which is a dependency for the toast component.

```bash
yarn add ngx-sonner

```

--------------------------------

### Install ngx-sonner dependency (pnpm)

Source: https://zardui.com/docs/components/toast

Install the ngx-sonner package using pnpm, which is a dependency for the toast component.

```bash
pnpm add ngx-sonner

```

--------------------------------

### Initialize Zard/ui with yarn

Source: https://zardui.com/docs/installation/angular

Prepare your project for Zard/ui components using the Zard CLI with yarn as the package manager.

```bash
yarn zard-cli@latest init
```

--------------------------------

### Install ngx-sonner dependency (npm)

Source: https://zardui.com/docs/components/toast

Install the ngx-sonner package using npm, which is a dependency for the toast component.

```bash
npm install ngx-sonner

```

--------------------------------

### Install Carousel Dependencies using bun

Source: https://zardui.com/docs/components/carousel

Install the required dependencies for the carousel component using bun.

```bash
bun add embla-carousel-angular embla-carousel-autoplay embla-carousel-class-names embla-carousel-wheel-gestures
```

--------------------------------

### Install Carousel Dependencies using yarn

Source: https://zardui.com/docs/components/carousel

Install the required dependencies for the carousel component using yarn.

```bash
yarn add embla-carousel-angular embla-carousel-autoplay embla-carousel-class-names embla-carousel-wheel-gestures
```

--------------------------------

### Install Carousel Dependencies using pnpm

Source: https://zardui.com/docs/components/carousel

Install the required dependencies for the carousel component using pnpm.

```bash
pnpm add embla-carousel-angular embla-carousel-autoplay embla-carousel-class-names embla-carousel-wheel-gestures
```

--------------------------------

### Importing Components with TypeScript Path Mappings

Source: https://zardui.com/docs/cli

Example demonstrating how to use the configured TypeScript path mappings for importing components and utilities.

```typescript
import { ButtonComponent } from '@/shared/components/button';
import { mergeClasses } from '@/shared/utils/merge-classes';
```

--------------------------------

### Add All Components (bun)

Source: https://zardui.com/docs/cli

Add all available ZardUI components to your project using bun. Use the --all flag for a comprehensive installation.

```bash
bunx zard-cli add --all
```

--------------------------------

### Install Carousel Dependencies using npm

Source: https://zardui.com/docs/components/carousel

Install the required dependencies for the carousel component using npm.

```bash
npm install embla-carousel-angular embla-carousel-autoplay embla-carousel-class-names embla-carousel-wheel-gestures
```

--------------------------------

### Install Toast using CLI (bun)

Source: https://zardui.com/docs/components/toast

Use the bun command to add the toast component to your project via the Zard CLI.

```bash
bunx zard-cli@latest add toast

```

--------------------------------

### Add Project Dependencies (yarn)

Source: https://zardui.com/docs/installation/angular

Install the necessary dependencies for zard/ui using yarn. Ensure you have yarn installed and configured.

```bash
yarn add @angular/cdk class-variance-authority clsx tailwind-merge tailwindcss-animate @ng-icons/core @ng-icons/lucide
```

--------------------------------

### Add Project Dependencies (pnpm)

Source: https://zardui.com/docs/installation/angular

Install the necessary dependencies for zard/ui using pnpm. Ensure you have pnpm installed and configured.

```bash
pnpm add @angular/cdk class-variance-authority clsx tailwind-merge tailwindcss-animate @ng-icons/core @ng-icons/lucide
```

--------------------------------

### Add All Components (pnpm)

Source: https://zardui.com/docs/cli

Add all available ZardUI components to your project using pnpm. Use the --all flag for a comprehensive installation.

```bash
pnpm dlx zard-cli add --all
```

--------------------------------

### Install Zard Input Component using bun

Source: https://zardui.com/docs/components/input

Use this command to add the Zard Input component to your project via bun.

```bash
bunx zard-cli@latest add input
```

--------------------------------

### Install @ng-icons/core and @ng-icons/lucide

Source: https://zardui.com/docs/changelog

Install the necessary packages for the new icon system. This replaces the previous custom icon component and registry.

```bash
npm install @ng-icons/core @ng-icons/lucide
```

--------------------------------

### Install Button Group Component

Source: https://zardui.com/docs/components/button-group

Use the Zard CLI to add the button-group component to your project. This command fetches and installs the necessary files.

```bash
npx zard-cli@latest add button-group
```

```bash
pnpm dlx zard-cli@latest add button-group
```

```bash
yarn dlx zard-cli@latest add button-group
```

```bash
bunx zard-cli@latest add button-group
```

--------------------------------

### Install Toast using CLI (npm)

Source: https://zardui.com/docs/components/toast

Use the npm command to add the toast component to your project via the Zard CLI.

```bash
npx zard-cli@latest add toast

```

--------------------------------

### Default Breadcrumb Example

Source: https://zardui.com/docs/components/breadcrumb

A basic example of how to implement the breadcrumb component with navigation links and an icon. Ensure to import necessary modules and provide icons.

```typescript
import { Component } from '@angular/core';

import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideHouse } from '@ng-icons/lucide';

import { ZardBreadcrumbImports } from '../breadcrumb.imports';

@Component({
  selector: 'z-demo-breadcrumb-default',
  imports: [ZardBreadcrumbImports, NgIcon],
  template: '
    <z-breadcrumb zWrap="wrap" zAlign="start">
      <z-breadcrumb-item [routerLink]="['/']">
        <ng-icon name="lucideHouse" />
        Home
      </z-breadcrumb-item>
      <z-breadcrumb-item [routerLink]="['/docs/components']">Components</z-breadcrumb-item>
      <z-breadcrumb-item>Breadcrumb</z-breadcrumb-item>
    </z-breadcrumb>
  ',
  viewProviders: [provideIcons({ lucideHouse })],
})
export class ZardDemoBreadcrumbDefaultComponent {}

```

--------------------------------

### Default Button Example

Source: https://zardui.com/docs/components/button

Demonstrates the basic usage of the Zard button component with outline styling. Includes examples with text, an icon, and both text and an icon.

```typescript
import { Component } from '@angular/core';

import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideArrowUp, lucidePopcorn } from '@ng-icons/lucide';

import { ZardButtonComponent } from '../button.component';

@Component({
  selector: 'z-demo-button-default',
  imports: [ZardButtonComponent, NgIcon],
  template: '
    <button type="button" z-button zType="outline">Button</button>
    <button type="button" z-button zType="outline"><ng-icon name="lucideArrowUp" /></button>
    <button type="button" z-button zType="outline">
      Button
      <ng-icon name="lucidePopcorn" />
    </button>
  ',
  viewProviders: [provideIcons({ lucideArrowUp, lucidePopcorn })],
})
export class ZardDemoButtonDefaultComponent {}
```

--------------------------------

### Menu Component Setup

Source: https://zardui.com/docs/components/menu

Demonstrates the necessary imports and provider for icons used within the Zard Menu component. Ensure these icons are provided for the component to render correctly.

```typescript
import {
  provideIcons,
  lucideChevronDown,
  lucideChevronRight,
  lucideBookOpen,
  lucideFileText,
  lucideInfo,
  lucideUsers,
} from '@ng-icons/lucide';

@Component({
  selector: 'app-zard-demo-menu-default',
  templateUrl: './menu-default.component.html',
  styleUrls: ['./menu-default.component.scss'],
  standalone: true,
  imports: [
    ZardMenuModule,
    ZardDividerModule,
    NgIconsModule,
    CommonModule,
  ],
  viewProviders: [
    provideIcons({
      lucideChevronDown,
      lucideChevronRight,
      lucideBookOpen,
      lucideFileText,
      lucideInfo,
      lucideUsers,
    }),
  ],
})
export class ZardDemoMenuDefaultComponent {
  log(item: string) {
    console.log('Navigate to:', item);
  }
}
```

--------------------------------

### Install Popover Component using CLI

Source: https://zardui.com/docs/components/popover

Installs the popover component into your project using the Zard CLI. Supports npm, pnpm, yarn, and bun package managers.

```bash
npx zard-cli@latest add popover
```

```bash
pnpm dlx zard-cli@latest add popover
```

```bash
yarn dlx zard-cli@latest add popover
```

```bash
bunx zard-cli@latest add popover
```

--------------------------------

### Install Toast using CLI (pnpm)

Source: https://zardui.com/docs/components/toast

Use the pnpm command to add the toast component to your project via the Zard CLI.

```bash
pnpm dlx zard-cli@latest add toast

```
Tokens:
Raw