Angular + Tailwind + Zard UI Starter

A powerful CLI tool that scaffolds a modern Angular application with Tailwind CSS and Zard UI pre-configured and ready to use. Get started building beautiful, production-ready web applications in seconds.

✨ Features

• 🚀 Automated Setup - Complete Angular project initialization with zero configuration
• 🎨 Tailwind CSS - Utility-first CSS framework pre-configured with PostCSS
• 🧩 Zard UI - Premium UI component library integrated out of the box
• 📦 Pre-built Landing Page - Modern, responsive starter template included
• ⚡ Instant Development - Start coding immediately after setup

📋 Prerequisites

Before using this tool, ensure you have the following installed on your system:

Required

• Node.js (v18.19.0 or higher)

  node --version

• npm (v9.0.0 or higher)

  npm --version

• Angular CLI (v19.0.0 or higher)

  npm install -g @angular/cli
  ng version

System Requirements

• Operating System: Windows 10+, macOS 10.15+, or Linux
• RAM: Minimum 4GB (8GB recommended)
• Disk Space: At least 500MB free space for the project

🚀 Quick Start

Installation & Usage

Run the following command in your terminal to create a new project:

npx angular-zardui <project-name>

Replace <project-name> with your desired project name:

npx angular-zardui my-awesome-app

What Happens During Setup

The tool automatically performs the following steps:

1. Creates Angular Application - Initializes a new Angular project using Angular CLI
2. Installs Tailwind CSS - Adds Tailwind CSS with PostCSS configuration
3. Configures Styling - Updates styles.css with Tailwind imports
4. Sets Up PostCSS - Creates .postcssrc.json with Tailwind plugin
5. Installs Zard UI - Initializes Zard UI component library
6. Adds Components - Installs button and icon components from Zard UI
7. Creates Landing Page - Generates a beautiful starter template with:
   • Responsive header with navigation
   • Hero section with gradient typography
   • Feature cards showcasing key benefits
   • Footer with attribution
8. Configures TypeScript - Updates app.ts with necessary imports
9. Optimizes CSS - Comments out conflicting plugins

🎯 Starting Your Development Server

After the setup completes, navigate to your project and start the development server:

cd my-awesome-app
npm start

Your application will be available at http://localhost:4200

📁 Project Structure

my-awesome-app/
├── src/
│   ├── app/
│   │   ├── app.ts              # Main component with Zard UI imports
│   │   ├── app.html            # Starter landing page template
│   │   ├── app.css             # Component styles
│   │   └── shared/
│   │       └── components/
│   │           ├── button/     # Zard UI button component
│   │           └── icon/       # Zard UI icon component
│   └── styles.css              # Global styles with Tailwind imports
├── .postcssrc.json             # PostCSS configuration
├── angular.json                # Angular CLI configuration
├── package.json                # Project dependencies
└── tailwind.config.js          # Tailwind configuration

🎨 Included Technologies

Angular

Modern web framework for building scalable applications with TypeScript and component-based architecture.

Documentation: https://angular.dev

Tailwind CSS

Utility-first CSS framework for rapid UI development with responsive design built-in.

Documentation: https://tailwindcss.com/docs

Zard UI

Premium Angular component library with beautiful, accessible, and customizable components.

Documentation: https://zardui.com/docs/components

🛠️ Customization

Adding More Zard UI Components

To add additional Zard UI components to your project:

npx @ngzard/ui@latest add <component-name>

Available components include input, card, dialog, dropdown, and more.

Modifying the Landing Page

Edit src/app/app.html to customize the starter template. The included design features:

• Dark theme with gradient backgrounds
• Glassmorphism effects on cards
• Responsive grid layouts
• Call-to-action buttons
• Link integrations to documentation

Configuring Tailwind

Customize your Tailwind setup by editing tailwind.config.js to add custom colors, fonts, spacing, and more.

🔧 Troubleshooting

Installation Issues

If you encounter errors during installation:

1. Clear npm cache:

   npm cache clean --force

2. Verify Angular CLI installation:

   ng version

3. Check Node.js version:

   node --version

Build Errors

If you face build errors after setup:

1. Delete node_modules and reinstall:

   rm -rf node_modules package-lock.json
   npm install

2. Check for port conflicts - Ensure port 4200 is available

📚 Learning Resources

• Angular Tutorial: https://angular.dev/tutorials
• Tailwind CSS Guide: https://tailwindcss.com/docs/utility-first
• Zard UI Examples: https://zardui.com/docs/components

🤝 Contributing

This project is open source. Contributions, issues, and feature requests are welcome!

👨‍💻 Author

Saif Khan

• GitHub: @saifkhan77806
• Project Repository: angular-zardui

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• Angular team for the incredible framework
• Tailwind Labs for Tailwind CSS
• Zard UI team for the component library

Ready to build something amazing? Get started now:

npx angular-zardui my-project
cd my-project
npm start

Happy coding! 🎉