Zard/ui

https://github.com/zard-ui/zardui
Admin
Zard is a free and open-source Angular component library built with Shadcn/ui and ng-zorro dev...
Tokens:720,744
Snippets:3,560
Trust Score:7.5
License:MIT
Update:4 weeks ago
Show doc for...
Tokens:
Raw
### Quick start: clone, install, and run the documentation site

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/docs/contribute.md

Quick start commands to fork, clone, install dependencies, and start the documentation site on port 4222. Requires Node >= 20.19.0.

```bash
# 1. Fork zardui/zardui on GitHub, then clone your fork
git clone https://github.com/<your-username>/zardui.git
cd zardui

# 2. Install dependencies (Node >= 20.19.0)
npm install

# 3. Start the documentation site on http://localhost:4222
npm start
```

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

### Add dependencies for manual setup

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/docs/installation/nx-library.md

Install the required runtime and development dependencies. There is no PostCSS setup here; the consuming app owns the build.

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

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

### Initialize zard/ui with bun

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/documentation/cli/installation.md

Run this command to initialize zard/ui in your project using bun. It starts the interactive setup wizard.

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

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

### Initialize zard/ui with pnpm

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/documentation/cli/installation.md

Run this command to initialize zard/ui in your project using pnpm. It starts the interactive setup wizard.

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

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

### Initialize zard/ui with yarn

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/documentation/cli/installation.md

Run this command to initialize zard/ui in your project using yarn. It starts the interactive setup wizard.

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

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

### Initialize zard/ui with npx zard-cli@latest init

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/docs/cli.md

Run this command to set up zard/ui in your project. It installs dependencies, writes theme tokens, configures import aliases, and wires Tailwind into the build for applications. The first question asks for the project type, which determines what gets configured.

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

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

### Inline Start Example Component

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/docs/components/input-group.md

Angular component demonstrating the default inline-start alignment for an input group addon with an icon.

```angular-ts
import { ChangeDetectionStrategy, Component } from '@angular/core';

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

import { ZardFieldImports } from '@/shared/components/field/field.imports';
import { ZardInputComponent } from '@/shared/components/input/input.component';
import { ZardInputGroupImports } from '@/shared/components/input-group/input-group.imports';

@Component({
  selector: 'z-demo-input-group-inline-start',
  imports: [ZardInputComponent, NgIcon, ...ZardInputGroupImports, ...ZardFieldImports],
  template: `
    <div z-field class="min-w-sm">
      <label z-field-label for="inline-start-input">Input</label>
      <z-input-group>
        <input z-input id="inline-start-input" placeholder="Search..." />
        <z-input-group-addon zAlign="inline-start">
          <ng-icon name="lucideSearch" class="text-muted-foreground" />
        </z-input-group-addon>
      </z-input-group>
      <p z-field-description>Icon positioned at the start.</p>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  viewProviders: [provideIcons({ lucideSearch })],
})
export class ZardDemoInputGroupInlineStartComponent {}
```
```

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

### Install the zard/ui skill with npx skills add

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/docs/skills.md

Installs the skill from the zard-ui/zardui repository using the skills CLI. The CLI asks whether to install for the project or globally, and which agents to install it for.

```bash
npx skills add zard-ui/zardui
```

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

### Install dependencies with bun

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/documentation/setup/angular/dependencies.md

Use bun to install runtime and dev dependencies for Zard UI Angular setup.

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

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

### Install dependencies with yarn

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/documentation/setup/angular/dependencies.md

Use yarn to install runtime and dev dependencies for Zard UI Angular setup.

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

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

### Initialize project with npx zard-cli init

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/docs/cli.md

Initializes a project and installs dependencies. Writes components.json, installs runtime and Tailwind packages, registers provideZard() in app config, wires Tailwind, writes theme tokens, maps import alias, and copies core/utils helpers. In libraries, skips build wiring and provider registration, and declares theme stylesheet as an asset. Running again overwrites previous configuration after confirmation.

```bash
npx zard-cli init
```

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

### Install dependencies with pnpm

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/documentation/setup/angular/dependencies.md

Use pnpm to install runtime and dev dependencies for Zard UI Angular setup.

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

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

### Install components with zard-cli add

Source: https://github.com/zard-ui/zardui/blob/master/skills/zard/cli.md

Installs the specified components (button, card, dialog) into the configured directory. Requires `components.json`; without it, the command stops and instructs to run `init`. Dependencies already present are filtered out. Use `-y` to skip confirmation, `-o` to overwrite (discards local changes), `-c` to set working directory, `-a` to add all components, and `-p` to specify output path (must stay inside working directory).

```bash
npx zard-cli add button card dialog
npx zard-cli add
```

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

### Bubble Alignment Example

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/docs/components/bubble.md

Shows how to use the z-bubble component with zVariant and zAlign inputs to align messages to the start (default) or end. The example includes two bubbles: one muted aligned to the start and one aligned to the end for user messages.

```angular-ts
import { ChangeDetectionStrategy, Component } from '@angular/core';

import { ZardBubbleImports } from '@/shared/components/bubble/bubble.imports';

@Component({
  selector: 'z-demo-bubble-alignment',
  imports: [...ZardBubbleImports],
  template: `
    <div class="flex w-full max-w-sm flex-col gap-8 py-12">
      <z-bubble zVariant="muted">
        <z-bubble-content>This bubble is aligned to the start. This is the default alignment.</z-bubble-content>
      </z-bubble>
      <z-bubble zAlign="end">
        <z-bubble-content>This bubble is aligned to the end. Use this for user messages.</z-bubble-content>
      </z-bubble>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: { class: 'contents' },
})
export class ZardDemoBubbleAlignmentComponent {}
```

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

### Default Message Example

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/docs/components/message.md

A complete default example showing a chat interface with multiple messages, avatars, bubbles, and reactions. It demonstrates different alignments (end and start), variants (muted), and footer text.

```angular-ts
import { ChangeDetectionStrategy, Component } from '@angular/core';

import { ZardAvatarComponent } from '@/shared/components/avatar';
import { ZardBubbleImports } from '@/shared/components/bubble/bubble.imports';
import { ZardMessageImports } from '@/shared/components/message/message.imports';

@Component({
  selector: 'z-demo-message-default',
  imports: [ZardAvatarComponent, ...ZardBubbleImports, ...ZardMessageImports],
  template: `
    <div class="flex w-full max-w-sm flex-col gap-6 py-12">
      <z-message zAlign="end">
        <z-message-avatar>
          <z-avatar zSrc="https://github.com/srizzon.png" zAlt="@srizzon" zFallback="SR" />
        </z-message-avatar>
        <z-message-content>
          <z-bubble>
            <z-bubble-content>Deploying to prod real quick.</z-bubble-content>
          </z-bubble>
        </z-message-content>
      </z-message>

      <z-message>
        <z-message-avatar>
          <z-avatar zSrc="https://github.com/Luizgomess.png" zAlt="@luizgomess" zFallback="LG" />
        </z-message-avatar>
        <z-message-content>
          <z-bubble zVariant="muted">
            <z-bubble-content>It's 4:55 PM. On a Friday.</z-bubble-content>
          </z-bubble>
        </z-message-content>
      </z-message>

      <z-message zAlign="end">
        <z-message-avatar>
          <z-avatar zSrc="https://github.com/srizzon.png" zAlt="@srizzon" zFallback="SR" />
        </z-message-avatar>
        <z-message-content>
          <z-bubble>
            <z-bubble-content>It's a one-line change.</z-bubble-content>
          </z-bubble>
          <z-message-footer>Delivered</z-message-footer>
        </z-message-content>
      </z-message>

      <z-message>
        <z-message-avatar>
          <z-avatar zSrc="https://github.com/Luizgomess.png" zAlt="@luizgomess" zFallback="LG" />
        </z-message-avatar>
        <z-message-content>
          <z-bubble-group>
            <z-bubble zVariant="muted">
              <z-bubble-content>It's always a one-line change 😭.</z-bubble-content>
            </z-bubble>
            <z-bubble zVariant="muted">
              <z-bubble-content>Alright, let me take a look.</z-bubble-content>
              <z-bubble-reactions role="img" aria-label="Reactions: thumbs up">
                <span>👍</span>
              </z-bubble-reactions>
            </z-bubble>
          </z-bubble-group>
        </z-message-content>
      </z-message>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: { class: 'contents' },
})
export class ZardDemoMessageDefaultComponent {}
```

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

### Finish the block: sync, screenshots, registry

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/docs/contribute/blocks.md

Manual steps after scaffolding: run npm run sync:blocks to populate files[], add light.png and dark.png screenshots, then run npm run build:registry so zard-cli and the MCP server can install the block.

```bash
# 1. Populate files[] from the component sources
npm run sync:blocks

# 2. Add the two screenshots the card renders
#    apps/web/public/blocks/<name>/light.png
#    apps/web/public/blocks/<name>/dark.png

# 3. Rebuild the registry consumed by the CLI
npm run build:registry
```

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

### Start the development environment

Source: https://github.com/zard-ui/zardui/blob/master/CONTRIBUTING.md

Starts the development server. The dev script pre-builds highlighted code blocks and runs the highlight generator in watch mode, serving the site on http://localhost:4222.

```bash
npm start
```

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

### zard-cli quick reference commands

Source: https://github.com/zard-ui/zardui/blob/master/skills/zard/SKILL.md

Quick reference for the zard-cli commands: init (with --type/--project, --yes), add (with --all, --overwrite, --path, --debug), and --version. Note that --yes is required without a TTY, and --overwrite asks before replacing local changes.

```bash
# Initialise a project (full-screen wizard).
npx zard-cli init
npx zard-cli init --type nx --project web        # answer the wizard up front
npx zard-cli init --yes                          # accept the defaults; required without a TTY

# Add components.
npx zard-cli add button card dialog
npx zard-cli add                                 # pick from the list
npx zard-cli add --all
npx zard-cli add button --overwrite              # replace local changes — ask first
npx zard-cli add button --path src/app/ui        # a directory other than the configured one

# Diagnose.
npx zard-cli add button --debug
npx zard-cli --version
```

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

### Configure port with .env

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/docs/contribute/setup.md

Copy .env.example to .env and set PORT to change the development server port.

```bash
PORT=4222
```

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

### Basic popover example component

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/docs/components/popover.md

Angular component demonstrating a basic popover with a header, title, and description, aligned to the start of the trigger.

```angular-ts
import { ChangeDetectionStrategy, Component } from '@angular/core';

import { ZardButtonComponent } from '@/shared/components/button/button.component';
import { ZardPopoverImports } from '@/shared/components/popover/popover.imports';

@Component({
  selector: 'z-demo-popover-basic',
  imports: [ZardButtonComponent, ...ZardPopoverImports],
  template: `
    <button type="button" z-button zPopover zAlign="start" zType="outline" class="w-fit" [zContent]="popoverContent">
      Open Popover
    </button>

    <ng-template #popoverContent>
      <z-popover>
        <div z-popover-header>
          <h4 z-popover-title>Dimensions</h4>
          <p z-popover-description>Set the dimensions for the layer.</p>
        </div>
      </z-popover>
    </ng-template>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZardDemoPopoverBasicComponent {}
```

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

### Install Input Component with CLI

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/docs/components/input.md

Installs the input component using the Zard CLI. Run this command in your project directory.

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

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

### Popover align example component

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/docs/components/popover.md

Angular component demonstrating the zAlign directive to align the popover against the trigger, with start, center, and end options.

```angular-ts
import { ChangeDetectionStrategy, Component } from '@angular/core';

import { ZardButtonComponent } from '@/shared/components/button/button.component';
import { ZardPopoverImports } from '@/shared/components/popover/popover.imports';

@Component({
  selector: 'z-demo-popover-align',
  imports: [ZardButtonComponent, ...ZardPopoverImports],
  template: `
    <div class="flex gap-6">
      @for (alignment of alignments; track alignment.align) {
        <button
          type="button"
          z-button
          zPopover
          zSize="sm"
          zType="outline"
          [zAlign]="alignment.align"
          [zContent]="popoverContent"
        >
          {{ alignment.label }}
        </button>

        <ng-template #popoverContent>
          <z-popover class="w-40">{{ alignment.content }}</z-popover>
        </ng-template>
      }
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZardDemoPopoverAlignComponent {
  readonly alignments = [
    { align: 'start', label: 'Start', content: 'Aligned to start' },
    { align: 'center', label: 'Center', content: 'Aligned to center' },
    { align: 'end', label: 'End', content: 'Aligned to end' },
  ] as const;
}
```

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

### Install Kbd with CLI

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/docs/components/kbd.md

Installs the Kbd component via the Zard CLI.

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

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

### add

Source: https://github.com/zard-ui/zardui/blob/master/skills/zard/cli.md

Installs components into the configured directory, resolving their dependencies (npm packages and other registry items) before writing anything. Accepts component names as positional arguments or opens a wizard if none are provided.

```APIDOC
## add

### Description
Installs components into the configured directory, resolving their dependencies — both npm packages and other registry items — before writing anything.

### Usage
bash
npx zard-cli add button card dialog
npx zard-cli add


### Flags
| Flag | Default | Purpose |
| --- | --- | --- |
| `-y, --yes` | `false` | Skip the confirmation. |
| `-o, --overwrite` | `false` | Overwrite existing files. |
| `-c, --cwd <cwd>` | current directory | The working directory. |
| `-a, --all` | `false` | Add every available component. |
| `-p, --path <path>` | the configured directory | Write to a different directory. Must stay inside the working directory. |

### Arguments
Positional arguments are component names — the same names the registry index publishes. With none, the wizard opens the list.

### Notes
- `add` requires `components.json`. Without it, it stops and tells you to run `init`.
- Dependencies already present in the project are filtered out, so a repeated `add` does not pay for a full dependency-tree revalidation.
- `add dark-mode` needs an `index.html` path, which it asks for. Headless, it warns instead: run it interactively to configure it.
- A pre-release Angular (`-rc`, `-next`, `-canary`) gets a compatibility warning, not a refusal.
- Headless, the component names must come from arguments or `--all` — there is no list to pick from.

**`--overwrite` discards local changes.** Never pass it without the user's explicit approval.
```

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

### Item Icon Example

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/docs/components/item.md

Shows how to use the z-item component with an icon, a title, a description, and an action button. Includes the necessary imports and component setup.

```angular-ts
import { ChangeDetectionStrategy, Component } from '@angular/core';

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

import { ZardButtonComponent } from '@/shared/components/button/button.component';
import { ZardItemImports } from '@/shared/components/item/item.imports';

@Component({
  selector: 'z-demo-item-icon',
  imports: [ZardButtonComponent, NgIcon, ...ZardItemImports],
  template: `
    <div class="flex w-full min-w-lg flex-col gap-6">
      <z-item zVariant="outline">
        <z-item-media zVariant="icon">
          <ng-icon name="lucideShieldAlert" />
        </z-item-media>
        <z-item-content>
          <z-item-title>Security Alert</z-item-title>
          <z-item-description>New login detected from unknown device.</z-item-description>
        </z-item-content>
        <z-item-actions>
          <button type="button" z-button zType="outline" zSize="sm">Review</button>
        </z-item-actions>
      </z-item>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  viewProviders: [provideIcons({ lucideShieldAlert })],
})
export class ZardDemoItemIconComponent {}
```

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

### Manual Installation Imports and Component Setup

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/docs/components/dialog.md

This snippet shows the required imports and the full component definition for the dialog, including the ZardDialogOptions class and the component template with its logic.

```angular-ts
import { A11yModule } from '@angular/cdk/a11y';
import { OverlayModule } from '@angular/cdk/overlay';
import {
  BasePortalOutlet,
  CdkPortalOutlet,
  type ComponentPortal,
  PortalModule,
  type TemplatePortal,
} from '@angular/cdk/portal';
import {
  ChangeDetectionStrategy,
  Component,
  type ComponentRef,
  computed,
  ElementRef,
  type EmbeddedViewRef,
  type EventEmitter,
  inject,
  output,
  type TemplateRef,
  type Type,
  viewChild,
  type ViewContainerRef,
  ViewEncapsulation,
} from '@angular/core';

import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideX } from '@ng-icons/lucide';
import type { ClassValue } from 'clsx';

import { ZardIdDirective } from '@/shared/core';
import { mergeClasses } from '@/shared/utils/merge-classes';
import { noopFn } from '@/shared/utils/noop';

import type { ZardDialogRef } from './dialog-ref';
import {
  dialogDescriptionVariants,
  dialogFooterVariants,
  dialogHeaderVariants,
  dialogTitleVariants,
  dialogVariants,
} from './dialog.variants';
import { ZardButtonComponent } from '../button/button.component';

export type OnClickCallback<T> = (instance: T) => false | void | object;
export class ZardDialogOptions<T, U> {
  zCancelIcon?: string;
  zCancelText?: string | null;
  zClosable?: boolean;
  zContent?: string | TemplateRef<T> | Type<T>;
  zCustomClasses?: ClassValue;
  zData?: U;
  zDescription?: string;
  /** Animation duration (ms) used when closing. Defaults to 100 (matches CSS transition). */
  zDuration?: number;
  zHideFooter?: boolean;
  /**
   * Keeps the title and description in the accessibility tree but out of the layout (`sr-only`),
   * the same trick shadcn uses when a dialog's content owns its own visual header.
   */
  zHideHeader?: boolean;
  zMaskClosable?: boolean;
  zOkDestructive?: boolean;
  zOkDisabled?: boolean;
  zOkIcon?: string;
  zOkText?: string | null;
  zOnCancel?: EventEmitter<T> | OnClickCallback<T> = noopFn;
  zOnOk?: EventEmitter<T> | OnClickCallback<T> = noopFn;
  zTitle?: string | TemplateRef<T>;
  zViewContainerRef?: ViewContainerRef;
  zWidth?: string;
}

@Component({
  selector: 'z-dialog',
  imports: [A11yModule, OverlayModule, PortalModule, ZardButtonComponent, ZardIdDirective, NgIcon],
  template: `
    <ng-container zardId="z-dialog" #idRef="zardId">
      @if (config.zClosable || config.zClosable === undefined) {
        <button
          type="button"
          data-testid="z-close-header-button"
          data-slot="dialog-close"
          z-button
          zType="ghost"
          zSize="icon-sm"
          class="absolute top-2 right-2"
          (click)="onCloseClick()"
        >
          <ng-icon name="lucideX" class="size-4!" />
          <span class="sr-only">Close</span>
        </button>
      }

      @if (config.zTitle || config.zDescription) {
        <header [class]="headerClasses()" data-slot="dialog-header">
          @if (config.zTitle) {
            <h4 data-testid="z-title" data-slot="dialog-title" [class]="titleClasses()" [id]="idRef.id() + '-title'">
              {{ config.zTitle }}
            </h4>

            @if (config.zDescription) {
              <p
                data-testid="z-description"
                data-slot="dialog-description"
                [class]="descriptionClasses()"
                [id]="idRef.id() + '-description'"
              >
                {{ config.zDescription }}
              </p>
            }
          }
        </header>
      }

      <main class="flex flex-col space-y-4">
        <ng-template cdkPortalOutlet />

        @if (isStringContent()) {
          <!-- Angular auto-sanitizes [innerHTML] by default; scripts/event handlers are stripped. -->
          <div data-testid="z-content" [innerHTML]="config.zContent"></div>
        }
      </main>

      @if (!config.zHideFooter) {
        <footer [class]="footerClasses()" data-slot="dialog-footer">
          @if (config.zCancelText !== null) {
            <button type="button" data-testid="z-cancel-button" z-button zType="outline" (click)="onCloseClick()">
              @if (config.zCancelIcon) {
                @if (isSvgString(config.zCancelIcon)) {
                  <ng-icon [svg]="config.zCancelIcon" class="size-4!" />
                } @else {
                  <ng-icon [name]="config.zCancelIcon" class="size-4!" />
                }
              }

              {{ config.zCancelText ?? 'Cancel' }}
            </button>
          }

          @if (config.zOkText !== null) {
            <button type="button" data-testid="z-ok-button" z-button zType="primary" (click)="onOkClick()">
              @if (config.zOkIcon) {
                @if (isSvgString(config.zOkIcon)) {
                  <ng-icon [svg]="config.zOkIcon" class="size-4!" />
                } @else {
                  <ng-icon [name]="config.zOkIcon" class="size-4!" />
                }
              }

              {{ config.zOkText ?? 'OK' }}
            </button>
          }
        </footer>
      }
    </ng-container>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
})
export class ZardDialogComponent<T, U> {
  readonly config = inject(ZardDialogOptions<T, U>);
  readonly dialogRef = inject(ZardDialogRef<T, U>);

  private readonly viewContainerRef = inject(ViewContainerRef);
  private readonly portalOutlet = viewChild.required(CdkPortalOutlet);

  readonly onOk = output<T>();
  readonly onCancel = output<T>();

  private readonly _headerClasses = computed(() =>
    mergeClasses(dialogHeaderVariants(), this.config.zCustomClasses),
  );
  private readonly _titleClasses = computed(() => mergeClasses(dialogTitleVariants(), this.config.zCustomClasses));
  private readonly _descriptionClasses = computed(() =>
    mergeClasses(dialogDescriptionVariants(), this.config.zCustomClasses),
  );
  private readonly _footerClasses = computed(() => mergeClasses(dialogFooterVariants(), this.config.zCustomClasses));

  readonly headerClasses = this._headerClasses.asReadonly();
  readonly titleClasses = this._titleClasses.asReadonly();
  readonly descriptionClasses = this._descriptionClasses.asReadonly();
  readonly footerClasses = this._footerClasses.asReadonly();

  constructor() {
    if (this.config.zOnOk instanceof EventEmitter) {
      this.config.zOnOk.subscribe((value) => this.onOk.emit(value));
    }
    if (this.config.zOnCancel instanceof EventEmitter) {
      this.config.zOnCancel.subscribe((value) => this.onCancel.emit(value));
    }
  }

  ngAfterViewInit(): void {
    this.attachContent();
  }

  private attachContent(): void {
    const content = this.config.zContent;
    if (content instanceof TemplateRef) {
      this.portalOutlet().attachTemplateRef(content, this.config.zData);
    } else if (content instanceof Type) {
      this.portalOutlet().attachComponentPortal(new ComponentPortal(content, this.viewContainerRef, this.config.zData));
    }
  }

  isStringContent(): boolean {
    return typeof this.config.zContent === 'string';
  }

  isSvgString(value: string): boolean {
    return value.startsWith('<svg');
  }

  onCloseClick(): void {
    this.dialogRef.close();
  }

  onOkClick(): void {
    if (this.config.zOnOk instanceof EventEmitter) {
      this.config.zOnOk.emit(this.config.zData as T);
    } else {
      const result = this.config.zOnOk(this.config.zData as T);
      if (result !== false) {
        this.dialogRef.close(result);
      }
    }
  }

  onCancelClick(): void {
    if (this.config.zOnCancel instanceof EventEmitter) {
      this.config.zOnCancel.emit(this.config.zData as T);
    } else {
      const result = this.config.zOnCancel(this.config.zData as T);
      if (result !== false) {
        this.dialogRef.close(result);
      }
    }
  }
}
```

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

### Initialize Zard UI library with bun

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/documentation/monorepo/library.md

Run this command to initialize a Zard UI library in an Nx monorepo using bun.

```bash
bunx zard-cli@latest init --type nx-library --project ui
```

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

### CLI prompt output for dark mode installation

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/docs/dark-mode.md

Example terminal output showing the CLI asking for the index.html path and confirming successful configuration. Press enter to accept the default.

```bash
✔ Installed 1 component

Dark mode requires additional configuration.

✔ Where is your index.html file? … src/index.html
✔ Successfully inserted theme script before </head> tag.
✔ Dark mode configured

Done!
```

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

### Install Select via CLI

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/docs/components/select.md

Run this command to add the Select component to your project using the Zard CLI.

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

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

### Demo Registry for Badge Component

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/docs/contribute/components.md

Defines the demo registry for the badge component, importing generated code and demo components, and exporting a BADGE object with metadata, installation, usage, and examples.

```typescript
import { BADGE_DEMO_DEFAULT } from '@generated/components/badge/demo/default';
import { BADGE_CLI_ADD } from '@generated/installation/cli/add-badge';
import { BADGE_MANUAL_CODE } from '@generated/installation/manual/badge';
import { BADGE_USAGE_CODE, BADGE_USAGE_IMPORT } from '@generated/usage/badge';

import { ZardDemoBadgeDefaultComponent } from './default';
import { BADGE_API } from '../doc/api';

export const BADGE = {
  componentName: 'badge',
  componentType: 'badge',
  description: 'Displays a badge or a component that looks like a badge.',
  api: BADGE_API,
  installData: {
    cliAdd: BADGE_CLI_ADD,
    manualCode: BADGE_MANUAL_CODE,
  },
  usage: { importBlock: BADGE_USAGE_IMPORT, codeBlock: BADGE_USAGE_CODE },
  examples: [
    {
      name: 'default',
      component: ZardDemoBadgeDefaultComponent,
      codeData: BADGE_DEMO_DEFAULT,
    },
  ],
};
```

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

### Install Drawer with zard-cli

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/docs/components/drawer.md

Installs the Drawer component using the Zard CLI.

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

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

### Manual Import and Component Setup

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/docs/components/combobox.md

Manual installation requires importing the necessary Angular decorators, forms, icons, and internal Zard components. The component implements ControlValueAccessor and provides NG_VALUE_ACCESSOR.

```angular-ts
import {
  booleanAttribute,
  ChangeDetectionStrategy,
  Component,
  computed,
  contentChild,
  effect,
  ElementRef,
  forwardRef,
  inject,
  input,
  linkedSignal,
  model,
  numberAttribute,
  output,
  signal,
  untracked,
  ViewEncapsulation,
} from '@angular/core';
import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

import { NgIcon } from '@ng-icons/core';
import type { ClassValue } from 'clsx';

import type { ZardButtonTypeVariants } from '@/shared/components/button';
import { comboboxValueVariants, comboboxVariants } from '@/shared/components/combobox/combobox.variants';
import { mergeClasses } from '@/shared/utils/merge-classes';
import { noopFn } from '@/shared/utils/noop';

import {
  ZardComboboxContentComponent,
  ZardComboboxEmptyComponent,
  ZardComboboxListComponent,
} from './combobox-content.component';
import { ZardComboboxGroupComponent, ZardComboboxLabelComponent } from './combobox-group.component';
import { ZardComboboxInputComponent } from './combobox-input.component';
import { ZardComboboxItemComponent } from './combobox-item.component';
import {
  type ZardComboboxAlignVariants,
  type ZardComboboxAnchorKind,
  type ZardComboboxFilterVariants,
  type ZardComboboxGroup,
  type ZardComboboxItemRef,
  type ZardComboboxOption,
  ZardComboboxRoot,
  type ZardComboboxSideVariants,
} from './combobox.types';
import { type ZardComboboxWidthVariants } from './combobox.variants';

export type { ZardComboboxGroup, ZardComboboxOption } from './combobox.types';

type OnChangeType = (value: string | string[] | null) => void;
type OnTouchedType = () => void;

let nextComboboxId = 0;

@Component({
  selector: 'z-combobox, [z-combobox]',
  imports: [
    NgIcon,
    ZardComboboxContentComponent,
    ZardComboboxEmptyComponent,
    ZardComboboxGroupComponent,
    ZardComboboxInputComponent,
    ZardComboboxItemComponent,
    ZardComboboxLabelComponent,
    ZardComboboxListComponent,
  ],
  template: `
    <ng-content />

    @if (!projectedContent()) {
      <z-combobox-input />

      <z-combobox-content>
        <z-combobox-empty>{{ emptyText() }}</z-combobox-empty>

        <z-combobox-list>
          @for (group of groups(); track group.label ?? $index) {
            <z-combobox-group>
              @if (group.label) {
                <z-combobox-label>{{ group.label }}</z-combobox-label>
              }
              @for (option of group.options; track option.value) {
                <z-combobox-item [zValue]="option.value" [zLabel]="option.label" [zDisabled]="option.disabled ?? false">
                  @if (option.icon; as icon) {
                    <ng-icon [name]="icon" />
                  }
                  {{ option.label }}
                </z-combobox-item>
              }
            </z-combobox-group>
          } @empty {
            @for (option of options(); track option.value) {
              <z-combobox-item [zValue]="option.value" [zLabel]="option.label" [zDisabled]="option.disabled ?? false">
                @if (option.icon; as icon) {
                  <ng-icon [name]="icon" />
                }
                {{ option.label }}
              </z-combobox-item>
            }
          }
        </z-combobox-list>
      </z-combobox-content>
    }
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => ZardComboboxComponent),
      multi: true,
    },
    {
      provide: ZardComboboxRoot,
      useExisting: forwardRef(() => ZardComboboxComponent),
    },
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  host: {
    'data-slot': 'combobox',
    '[attr.data-auto-highlight]': 'zAutoHighlight() ? "" : null',
    '[attr.data-disabled]': 'disabled() ? "" : null',
    '[attr.data-invalid]': 'zInvalid() ? "" : null',
    '[attr.data-multiple]': 'zMultiple() ? "" : null',
    '[attr.data-state]': 'open() ? "open" : "closed"',
    '[class]': 'classes()',
    '(keydown)': 'handleKeydown($event)',
  },
  exportAs: 'zCombobox',
})
export class ZardComboboxComponent implements ControlValueAccessor, ZardComboboxRoot {
  private readonly elementRef = inject(ElementRef<HTMLElement>);
```

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

### Manual installation and component code

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/docs/components/message.md

Manual setup requires importing the necessary Angular modules and components. The code defines ZardMessageGroupComponent, ZardMessageAvatarComponent, ZardMessageHeaderComponent, ZardMessageContentComponent, and ZardMessageFooterComponent with their respective templates and styles.

```angular-ts
import {
  ChangeDetectionStrategy,
  Component,
  computed,
  contentChild,
  input,
  type TemplateRef,
  ViewEncapsulation,
} from '@angular/core';
import type { SafeUrl } from '@angular/platform-browser';

import type { ClassValue } from 'clsx';

import { ZardAvatarComponent } from '@/shared/components/avatar/avatar.component';
import { ZardBubbleComponent } from '@/shared/components/bubble/bubble.component';
import type { ZardBubbleVariantVariants } from '@/shared/components/bubble/bubble.variants';
import { ZardStringTemplateOutletDirective } from '@/shared/core';
import { mergeClasses } from '@/shared/utils/merge-classes';

import {
  messageAvatarVariants,
  messageContentVariants,
  messageFooterVariants,
  messageGroupVariants,
  messageHeaderVariants,
  messageVariants,
  type ZardMessageAlignVariants,
} from './message.variants';

@Component({
  selector: 'z-message-group, [z-message-group]',
  template: '<ng-content />',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  host: {
    'data-slot': 'message-group',
    '[class]': 'classes()',
  },
  exportAs: 'zMessageGroup',
})
export class ZardMessageGroupComponent {
  readonly class = input<ClassValue>('');

  protected readonly classes = computed(() => mergeClasses(messageGroupVariants(), this.class()));
}

@Component({
  selector: 'z-message-avatar, [z-message-avatar]',
  template: '<ng-content />',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  host: {
    'data-slot': 'message-avatar',
    '[class]': 'classes()',
  },
  exportAs: 'zMessageAvatar',
})
export class ZardMessageAvatarComponent {
  readonly class = input<ClassValue>('');

  protected readonly classes = computed(() => mergeClasses(messageAvatarVariants(), this.class()));
}

@Component({
  selector: 'z-message-header, [z-message-header]',
  imports: [ZardStringTemplateOutletDirective],
  template: `
    @let header = zHeader();
    @if (header) {
      <ng-container *zStringTemplateOutlet="header">{{ header }}</ng-container>
    }
    <ng-content />
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  host: {
    'data-slot': 'message-header',
    '[class]': 'classes()',
  },
  exportAs: 'zMessageHeader',
})
export class ZardMessageHeaderComponent {
  readonly class = input<ClassValue>('');
  readonly zHeader = input<string | TemplateRef<void>>();

  protected readonly classes = computed(() => mergeClasses(messageHeaderVariants(), this.class()));
}

@Component({
  selector: 'z-message-content, [z-message-content]',
  /**
   * The header comes first and the footer last whatever order they are written in,
   * so the reading order stays avatar → header → surface → footer even when the
   * template puts the footer next to the bubble it belongs to.
   */
  template: `
    <ng-content select="z-message-header, [z-message-header]" />
    <ng-content />
    <ng-content select="z-message-footer, [z-message-footer]" />
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  host: {
    'data-slot': 'message-content',
    '[class]': 'classes()',
  },
  exportAs: 'zMessageContent',
})
export class ZardMessageContentComponent {
  readonly class = input<ClassValue>('');

  protected readonly classes = computed(() => mergeClasses(messageContentVariants(), this.class()));
}

@Component({
  selector: 'z-message-footer, [z-message-footer]',
  imports: [ZardStringTemplateOutletDirective],
  template: `
    @let footer = zFooter();
    @if (footer) {
      <ng-container *zStringTemplateOutlet="footer">{{ footer }}</ng-container>
    }
    <ng-content />
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  host: {
    'data-slot': 'message-footer',
    '[class]': 'classes()',
  },
  exportAs: 'zMessageFooter',
})
export class ZardMessageFooterComponent {
  readonly class = input<ClassValue>('');
  readonly zFooter = input<string | TemplateRef<void>>();

  protected readonly classes = computed(() => mergeClasses(messageFooterVariants(), this.class()));
}
```

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

### Init progress output

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/docs/cli.md

Shows the live progress of the init steps. It writes configuration files, installs dependencies, and shows a progress bar. The output lists files like components.json, dependencies, app.config.ts, .postcssrc.json, styles.css, tsconfig.base.json, and core & utils.

```terminal
✔  Writing configuration…

   ✔  components.json                 —  component & utils aliases
   ✔  dependencies                    —  CDK, CVA, tailwind-merge, ng-icons (Lucide)
   ✔  apps/web/src/app/app.config.ts  —  zard/ui providers
   ✔  apps/web/.postcssrc.json        —  Tailwind PostCSS plugin
   ✔  apps/web/src/styles.css         —  theme tokens (neutral)
   ✔  tsconfig.base.json              —  import path aliases
   ✔  core & utils                    —  shared helpers used by every component

   ████████████████████████████████████████  100%

   ╭───────────────────────────────────────────────╮
   │ ✔  zard/ui has been initialized successfully!  │
   ╰───────────────────────────────────────────────╯
```

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

### Install typeset with npx zard-cli

Source: https://github.com/zard-ui/zardui/blob/master/apps/web/public/docs/typeset.md

Run this command to install the typeset CSS. The CLI writes typeset.css next to your global stylesheet and adds the import for you.

```bash
npx zard-cli@latest add typeset
```
Tokens:
Raw