Changelog

PreviousNext

Latest updates and announcements.

October 2025 - Major Icons Migration, CLI updates, new components and docs upgrade

This month brings a major breaking change with the complete migration from lucide-static to lucide-angular, significant CLI improvements with theme support and multi-package manager compatibility, plus three powerful new components.

🚀 Major Update: Icons Migration (Breaking Change)

Migration from CSS icon classes to lucide-angular

We've completely migrated all components from CSS-based icon classes to lucide-angular for significantly better performance and Angular optimization. This is a breaking change that requires action from users.

Why this change?

  • ⚡ Better Performance: Native Angular components instead of CSS icon fonts
  • 🎯 Tree-shaking: Only icons you use are bundled
  • 🔄 Better Integration: Proper Angular lifecycle and change detection
  • 📦 Smaller Bundle Size: Dynamic imports reduce initial load
  • 🎨 Better Customization: Full control over icon properties

What you need to do:

If you're using ZardUI icons in your project, you need to update from CSS classes to lucide-angular components:

// ❌ Old way (CSS classes)
@Component({
  template: `<div class="icon-home"></div>`
})
export class MyComponent {}
 
// ✅ New way (lucide-angular)
import { LucideAngularModule, Home } from 'lucide-angular';
 
@Component({
  imports: [LucideAngularModule],
  template: `<lucide-angular [img]="HomeIcon" [size]="20" />`
})
export class MyComponent {
  readonly HomeIcon = Home;
}

Or using ZardUI's icon component:

import { ZardIconComponent } from '@zard/components/icon';
import { Home } from 'lucide-angular';
 
@Component({
  imports: [ZardIconComponent],
  template: `<div z-icon [zType]="HomeIcon"></div>`
})
export class MyComponent {
  readonly HomeIcon = Home;
}

About Beta Status:

As we're still in beta, we're continuously improving our documentation and components based on feedback from our community. Changes like this may happen during the beta phase as we optimize the library. Once we reach version 1.0, breaking changes will be much more controlled and follow semantic versioning strictly.

Need Help?

We're 100% committed to helping with this migration! If you encounter any issues or need assistance:

This change sets the foundation for better performance and a more maintainable codebase going forward.

✨ New Components

Sidebar Component

A collapsible Layout component with smooth transitions and customizable width.

import { LayoutComponent } from '@shared/components/layout';

Sheet Component

A versatile sheet component for side panels and overlays with customizable positioning and animations.

import { ZardSheetService } from '@zard/components/sheet';
 
export class MyComponent {
  private sheetService = inject(ZardSheetService);
 
  openSheet() {
    this.sheetService.create({
      zTitle: 'Edit profile',
      zDescription: `Make changes to your profile here. Click save when you're done.`,
      zContent: ZardDemoSheetBasicInputComponent,
      zData: {
        name: 'Matheus Ribeiro',
        username: '@ribeiromatheus.dev',
      } as iSheetData,
      zOkText: 'Save changes',
      zOnOk: instance => {
        console.log('Form submitted:', instance.form.value);
      },
    });
  }
}

Empty Component

A clean empty state component for displaying "no data" scenarios with customizable messages and actions.

import { ZardEmptyComponent } from '@shared/components/empty';
 
@Component({
  template: ` <z-empty zImage="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg" /> `,
})
export class DataViewComponent {}

📦 Multi-Package Manager Support

The CLI now automatically detects and supports npm, pnpm, yarn, and bun. No configuration needed - just use your preferred package manager and the CLI adapts automatically.

🎨 CLI Theme Support

The CLI now includes interactive theme selection during initialization. Choose from multiple pre-built themes to kickstart your project with the perfect style.

Available Themes

npx @ngzard/ui init

When you run the init command, you'll see:

✔ Choose a theme for your components:
  • Neutral (Default)
  • Stone
  • Zinc
  • Gray
  • Slate

September 2025 - Angular 20 & CLI Enhancements

This month brought Angular 20 migration and enhanced CLI functionality with theme selection and package manager detection.

🚀 Angular 20 Migration

We've successfully migrated ZardUI to Angular 20, bringing all the latest improvements and features. All components have been tested and verified to work seamlessly with Angular 20.

✨ CLI Enhancements

The CLI now supports theme selection during initialization.

npx @ngzard init
# Now includes theme selection prompt

Package Manager Detection

Added automatic package manager detection that works with npm, yarn, and pnpm for better compatibility across different development environments.

🐛 Component Fixes

Calendar Component

Fixed issues with Calendar component registration and incomplete @themes configurations.

Slider Component

Resolved TypeScript errors related to DOCUMENT import in the Slider component.

August 2025 - CLI Foundation

August marked the foundation of the ZardUI CLI with the first releases and core architecture.

🚀 CLI Releases

CLI v1.0.0-beta.2

We shipped CLI v1.0.0-beta.2 with comprehensive core directive support.

npm install @ngzard/ui@1.0.0-beta.2

Key improvements include enhanced directive system for better code organization, improved command processing and error handling, and optimized performance.

v1.0.0-alpha.3

Core functionality improvements and enhanced CLI command structure.

v1.0.0-alpha.1

First official alpha release 🎉 - Basic CLI functionality with foundational architecture.

🔧 Core Directive System

Implemented a core directive system that provides better code organization, cleaner separation of concerns, and enhanced maintainability for all ZardUI components.

Loading...
Loading...

May 2025 - Documentation Enhancements

May focused on improving the documentation system and developer experience.

Loading...
Loading...