GawTech - Angular Components

A modern, type-safe collection of Angular components built with PrimeNG and Tailwind CSS. Designed to accelerate enterprise development with production-ready, fully customizable components.

✨ Features:

• 🎯 Type-Safe - Full TypeScript support with strict typing
• 🧩 Modular Architecture - Import only what you need
• 🎨 Theme-Ready - Native PrimeNG theme integration
• ⚡ Standalone Components - Compatible with Angular's latest architecture
• 📱 Responsive - Mobile-first design with Tailwind CSS
• ♿ Accessible - WCAG compliant components

⚙️ System Requirements

| Dependency | Version | Required | Notes | |------------|---------|----------|-------| | Angular | ^19.2.0 | ✅ | Core framework | | Angular Forms | ^19.2.0 | ✅ | Reactive forms support | | Angular Router | ^19.2.0 | ✅ | For breadcrumb navigation | | PrimeNG | ^19.1.3 | ✅ | UI component library | | PrimeNG Themes | ^19.1.3 | ✅ | Theme system | | Tailwind CSS | ^3.4.0 | ✅ | Utility-first CSS | | Tailwindcss-PrimeUI | ^0.6.1 | ✅ | With Tailwindcss-primeui | | RxJS | ~7.8.0 | ✅ | Reactive programming | | TypeScript | ~5.7.0 | ✅ | Type safety |

📦 Quick Start

Installation

npm install @gawtech/angular-components

🛠️ Setup

1. Install required peer dependencies:

# Angular core packages
npm install @angular/core@^19 @angular/common@^19 @angular/forms@^19 @angular/router@^19 @angular/platform-browser@^19 rxjs@~7

# PrimeNG UI components and themes
npm install primeng@^19 @primeng/themes@^19

# Tailwind CSS integration
npm install tailwindcss@^3 tailwindcss-primeui@^0.6

2. Configure your Angular application:

// app.config.ts
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

import { providePrimeNG } from 'primeng/config';
import Aura from '@primeng/themes/aura';

export const appConfig: ApplicationConfig = {
  providers: [
    // ... other providers
    provideAnimationsAsync(),
    providePrimeNG({
      theme: {
        preset: Aura
      }
    })
  ]
};

3. Import Tailwind CSS and PrimeNG styles:

/* styles.scss */
@tailwind base;
@tailwind components;
@tailwind utilities;

4. Create and configure tailwind.config.js:

If you don’t have a Tailwind configuration yet, create it:

npx tailwindcss init

Then edit tailwind.config.js:

import PrimeUI from 'tailwindcss-primeui';
import { GawtechUI } from '@gawtech/angular-components/tailwind';

export default {
  darkMode: ['selector', '[class*="app-dark"]'],
  content: [
    './index.html',
    './src/**/*.{html,ts}',
    "./node_modules/@gawtech/angular-components/**/*.{js,mjs,html,ts}",
  ],
  plugins: [PrimeUI, GawtechUI],
  theme: {
    extend: {},
    screens: {
      sm: '576px',
      md: '768px',
      lg: '992px',
      xl: '1200px',
      '2xl': '1920px',
    },
  },
};

💡 Important:
Including ./node_modules/@gawtech/angular-components/**/*.{js,mjs,html,ts} in content ensures all Tailwind classes used by the components are generated correctly in your build.
Without this configuration, styles may not appear or may break in production.

🎉 Setup Complete!

Your Angular application is now fully configured and ready to use GawTech Angular Components!

You can now:

• ✅ Import and use any of the available components
• ✅ Customize themes and styling as needed
• ✅ Build production-ready applications

Check out the component documentation below to get started with implementation.

🧩 Available Components

| Component | Description | Documentation | | --------------------- | ------------------------------------- | ------------------------------------------------------------- | | Breadcrumb | Breadcrumb navigation component | 📄 Breadcrumb README | | Control Errors | Standardized validation error display | 📄 Control Errors README | | Dynamic Form (Beta) | Fully dynamic form generator | 📄 Dynamic Form README |

🗺️ Roadmap

This library is under active development. New components and features will be added in future releases.

📬 Support & Feedback

This library is distributed as a private package via npm. If you encounter any issues, have feature requests, or would like to provide feedback, please contact us directly:

Email: [email protected]

We value your feedback and aim to continuously improve our component suite.

🔑 License

This library is proprietary software developed by GawTech.

• ✅ Free to use in your Angular projects
• ✅ Commercial use permitted
• ❌ Source code is not distributed
• ❌ Redistribution not permitted

For full terms, see the LICENSE file.

Built with ❤️ by GawTech