Ngx Lite Suite

Ngx Lite Suite is a modern, lightweight Angular UI component library designed with a focus on aesthetics and user experience. It features a unique "Lite Suite" design system characterized by glassmorphism, subtle gradients, and fluid animations.

✨ Features

• Modern Design: Built with a custom "Lite Suite" design system.
• Glassmorphism: Premium frosted glass effects on overlays and dropdowns.
• Tailwind CSS: Fully compatible and built on top of Tailwind CSS.
• Lightweight: Modular components to keep your bundle size small.
• Dark Mode: Native support for dark mode.
• Angular 21: Full support for the latest Angular version.

⚠️ Prerequisites

Before installing this library, you must have Tailwind CSS configured in your Angular project. The library uses Tailwind utility classes and requires Tailwind to generate the styles.

If you don't have Tailwind CSS installed yet, follow the official Tailwind CSS installation guide for Angular.

📦 Installation & Configuration

1. Install the library

npm install ngx-lite-suite

2. Configure Tailwind CSS (CRITICAL STEP)

[!IMPORTANT] This step is mandatory! Without this configuration, the components will not have any styles.

Ngx Lite Suite relies on Tailwind CSS to generate its styles. You must configure your project to scan the library's files for class names.

Option A: Tailwind CSS v4 (Recommended)

If you are using Tailwind CSS v4, add the library to your CSS source scanning using the @source directive in your main CSS file (e.g., src/styles.css):

@import "tailwindcss";

/* REQUIRED: Add this line to scan the library for Tailwind classes */
@source "../node_modules/ngx-lite-suite";

Option B: Tailwind CSS v3

If you are using Tailwind CSS v3 with tailwind.config.js, add the library path to the content array:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
    "./node_modules/ngx-lite-suite/**/*.{html,ts,mjs}" // REQUIRED: Add this line
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Import Icons (Optional but Recommended)

Add the Material Symbols font to your index.html to ensure icons render correctly:

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&display=swap" rel="stylesheet" />

4. Verify Installation

Create a simple test component to verify the styles are working:

import { Component } from '@angular/core';
import { NgxButton } from 'ngx-lite-suite';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgxButton],
  template: `
    <div class="p-8">
      <lib-ngx-button variant="primary">Test Button</lib-ngx-button>
    </div>
  `
})
export class AppComponent {}

Expected result: The button should have a blue background with hover effects and proper styling.

🚀 Components

NgxButton

A versatile button component with multiple variants, sizes, and states.

Usage:

<lib-ngx-button
  variant="primary"
  size="md"
  [loading]="isLoading"
  (click)="handleClick()">
  Click Me
</lib-ngx-button>

API:

| Input | Type | Default | Description | |-------|------|---------|-------------| | variant | 'primary' \| 'secondary' \| 'danger' \| 'outline' \| 'link' | 'primary' | Visual style of the button. | | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | 'md' | Size of the button. | | type | 'button' \| 'submit' \| 'reset' | 'button' | HTML button type. | | disabled | boolean | false | Disables the button. | | loading | boolean | false | Shows a loading spinner and disables interaction. | | iconLeft | string | null | Material Symbol name for left icon. | | iconRight | string | null | Material Symbol name for right icon. | | rounded | 'none' \| 'sm' \| 'md' \| 'lg' \| 'full' | 'md' | Border radius. | | fullWidth | boolean | false | Whether the button takes full width. |

| Output | Type | Description | |--------|------|-------------| | click | Event | Emitted when the button is clicked. |

NgxAlert

A dynamic alert system for notifications with support for auto-dismissal and actions.

Usage (Component):

<lib-ngx-alert
  type="success"
  title="Success"
  message="Operation completed."
  [autoDismiss]="true">
</lib-ngx-alert>

Usage (Service):

constructor(private alert: NgxAlertService) {}

showMessage() {
  this.alert.success({
    title: 'Success!',
    message: 'Operation completed successfully.'
  });
}

API:

| Input | Type | Default | Description | |-------|------|---------|-------------| | type | 'success' \| 'error' \| 'warning' \| 'info' | 'info' | Type of alert. | | variant | 'filled' \| 'outlined' \| 'accent' | 'filled' | Visual style. | | title | string | '' | Alert title. | | message | string | '' | Alert message body. | | closeable | boolean | true | Whether the close button is shown. | | autoDismiss | boolean | true | Whether to auto-close after timeout. | | dismissTimeout | number | 10000 | Time in ms before auto-dismiss. | | showActions | boolean | false | Show action buttons. | | actionLabel | string | 'Revisar ahora' | Label for primary action. | | secondaryActionLabel | string | 'Cancelar' | Label for secondary action. |

| Output | Type | Description | |--------|------|-------------| | close | void | Emitted when closed. | | action | void | Emitted when primary action clicked. | | secondaryAction | void | Emitted when secondary action clicked. |

NgxDatepicker

A stylish datepicker with range selection and glassmorphism.

Usage:

<!-- Single Date -->
<lib-ngx-datepicker [(value)]="selectedDate"></lib-ngx-datepicker>

<!-- Date Range -->
<lib-ngx-datepicker [range]="true" (rangeChange)="onRangeChange($event)"></lib-ngx-datepicker>

API:

| Input | Type | Default | Description | |-------|------|---------|-------------| | value | Date \| null | null | Selected date (Two-way binding). | | min | Date \| null | null | Minimum selectable date. | | max | Date \| null | null | Maximum selectable date. | | variant | 'filled' \| 'outline' | 'filled' | Visual style. | | fullWidth | boolean | false | Whether to take full width. | | range | boolean | false | Enable date range selection. |

| Output | Type | Description | |--------|------|-------------| | valueChange | Date | Emitted when a single date is selected. | | rangeChange | DateRange | Emitted when a range is selected ({start, end}). |

NgxDropdown

A modern dropdown with custom styling and animations.

Usage:

<lib-ngx-dropdown
  label="Select Category"
  placeholder="Choose..."
  [options]="options"
  [(value)]="selectedValue">
</lib-ngx-dropdown>

TypeScript:

options = [
  { label: 'Option 1', value: '1' },
  { label: 'Option 2', value: '2', icon: 'star' },
  { label: 'Option 3', value: '3' }
];

API:

| Input | Type | Default | Description | |-------|------|---------|-------------| | label | string | '' | Label text above dropdown. | | placeholder | string | 'Select an option...' | Placeholder text. | | options | DropdownOption[] | [] | Array of options ({ label, value, icon? }). | | value | any | null | Selected value (Two-way binding). |

| Output | Type | Description | |--------|------|-------------| | valueChange | any | Emitted when selection changes. |

NgxPagination

A Cyberpunk-styled pagination control with neon glow effects.

Usage:

<lib-ngx-pagination
  [currentPage]="currentPage"
  [totalItems]="100"
  [itemsPerPage]="10"
  (pageChange)="onPageChange($event)">
</lib-ngx-pagination>

API:

| Input | Type | Default | Description | |-------|------|---------|-------------| | currentPage | number | 1 | The current active page. | | totalItems | number | required | Total number of items to paginate. | | itemsPerPage | number | 10 | Number of items per page. | | visiblePages | number | 5 | Max number of page buttons to show. |

| Output | Type | Description | |--------|------|-------------| | pageChange | number | Emitted when a new page is selected. |

🔧 Troubleshooting

Styles are not appearing / Components look unstyled

Problem: Components appear without any styling (no colors, no padding, etc.)

Solution: This happens when Tailwind CSS is not scanning the library files. Make sure you've completed Step 2 of the installation:

For Tailwind v4, verify your src/styles.css contains:

@import "tailwindcss";
@source "../node_modules/ngx-lite-suite";

For Tailwind v3, verify your tailwind.config.js contains:

content: [
  "./src/**/*.{html,ts}",
  "./node_modules/ngx-lite-suite/**/*.{html,ts,mjs}"
]

After making changes, restart your development server (ng serve).

Icons are not showing

Problem: Icon placeholders appear but no actual icons are visible.

Solution: Add the Material Symbols font to your index.html:

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&display=swap" rel="stylesheet" />

Peer dependency warnings with Angular

Problem: npm shows peer dependency warnings about Angular version.

Solution: This library requires Angular 21+. Update your Angular version:

ng update @angular/core @angular/cli

🎨 Design System

The library uses a custom design system:

• Primary Color: Blue hues (bg-blue-600, hover:bg-blue-700)
• Secondary Color: Gray tones
• Rounded Corners: Consistent rounded-md and rounded-lg radius
• Animations: Smooth transitions for all interactive elements
• Focus States: Accessible focus rings on all interactive components

📝 Examples

Complete Component Example

import { Component } from '@angular/core';
import { NgxButton, NgxAlert, NgxDatepicker, NgxDropdown } from 'ngx-lite-suite';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [NgxButton, NgxAlert, NgxDatepicker, NgxDropdown],
  template: `
    <div class="p-8 space-y-4">
      <!-- Button -->
      <lib-ngx-button 
        variant="primary" 
        [loading]="isLoading"
        (click)="handleClick()">
        Save Changes
      </lib-ngx-button>

      <!-- Alert -->
      <lib-ngx-alert
        type="success"
        title="Success!"
        message="Your changes have been saved.">
      </lib-ngx-alert>

      <!-- Datepicker -->
      <lib-ngx-datepicker 
        [(value)]="selectedDate">
      </lib-ngx-datepicker>

      <!-- Dropdown -->
      <lib-ngx-dropdown
        label="Category"
        [options]="categories"
        [(value)]="selectedCategory">
      </lib-ngx-dropdown>
    </div>
  `
})
export class DemoComponent {
  isLoading = false;
  selectedDate: Date | null = null;
  selectedCategory: string | null = null;
  
  categories = [
    { label: 'Technology', value: 'tech' },
    { label: 'Design', value: 'design' },
    { label: 'Business', value: 'business' }
  ];

  handleClick() {
    this.isLoading = true;
    setTimeout(() => this.isLoading = false, 2000);
  }
}

| closeable | boolean | true | Whether the close button is shown. | | autoDismiss | boolean | true | Whether to auto-close after timeout. | | dismissTimeout | number | 10000 | Time in ms before auto-dismiss. | | showActions | boolean | false | Show action buttons. | | actionLabel | string | 'Revisar ahora' | Label for primary action. | | secondaryActionLabel | string | 'Cancelar' | Label for secondary action. |

| Output | Type | Description | |--------|------|-------------| | close | void | Emitted when closed. | | action | void | Emitted when primary action clicked. | | secondaryAction | void | Emitted when secondary action clicked. |

NgxDatepicker

A stylish datepicker with range selection and glassmorphism.

Usage:

<!-- Single Date -->
<lib-ngx-datepicker [(value)]="selectedDate"></lib-ngx-datepicker>

<!-- Date Range -->
<lib-ngx-datepicker [range]="true" (rangeChange)="onRangeChange($event)"></lib-ngx-datepicker>

API:

| Input | Type | Default | Description | |-------|------|---------|-------------| | value | Date \| null | null | Selected date (Two-way binding). | | min | Date \| null | null | Minimum selectable date. | | max | Date \| null | null | Maximum selectable date. | | variant | 'filled' \| 'outline' | 'filled' | Visual style. | | fullWidth | boolean | false | Whether to take full width. | | range | boolean | false | Enable date range selection. |

| Output | Type | Description | |--------|------|-------------| | valueChange | Date | Emitted when a single date is selected. | | rangeChange | DateRange | Emitted when a range is selected ({start, end}). |

NgxDropdown

A modern dropdown with custom styling and animations.

Usage:

<lib-ngx-dropdown
  label="Select Category"
  placeholder="Choose..."
  [options]="options"
  [(value)]="selectedValue">
</lib-ngx-dropdown>

TypeScript:

options = [
  { label: 'Option 1', value: '1' },
  { label: 'Option 2', value: '2', icon: 'star' },
  { label: 'Option 3', value: '3' }
];

API:

| Input | Type | Default | Description | |-------|------|---------|-------------| | label | string | '' | Label text above dropdown. | | placeholder | string | 'Select an option...' | Placeholder text. | | options | DropdownOption[] | [] | Array of options ({ label, value, icon? }). | | value | any | null | Selected value (Two-way binding). |

| Output | Type | Description | |--------|------|-------------| | valueChange | any | Emitted when selection changes. |

🔧 Troubleshooting

Styles are not appearing / Components look unstyled

Problem: Components appear without any styling (no colors, no padding, etc.)

Solution: This happens when Tailwind CSS is not scanning the library files. Make sure you've completed Step 2 of the installation:

For Tailwind v4, verify your src/styles.css contains:

@import "tailwindcss";
@source "../node_modules/ngx-lite-suite";

For Tailwind v3, verify your tailwind.config.js contains:

content: [
  "./src/**/*.{html,ts}",
  "./node_modules/ngx-lite-suite/**/*.{html,ts,mjs}"
]

After making changes, restart your development server (ng serve).

Icons are not showing

Problem: Icon placeholders appear but no actual icons are visible.

Solution: Add the Material Symbols font to your index.html:

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&display=swap" rel="stylesheet" />

Peer dependency warnings with Angular

Problem: npm shows peer dependency warnings about Angular version.

Solution: This library requires Angular 21+. Update your Angular version:

ng update @angular/core @angular/cli

🎨 Design System

The library uses a custom design system:

• Primary Color: Blue hues (bg-blue-600, hover:bg-blue-700)
• Secondary Color: Gray tones
• Rounded Corners: Consistent rounded-md and rounded-lg radius
• Animations: Smooth transitions for all interactive elements
• Focus States: Accessible focus rings on all interactive components

📝 Examples

Complete Component Example

import { Component } from '@angular/core';
import { NgxButton, NgxAlert, NgxDatepicker, NgxDropdown } from 'ngx-lite-suite';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [NgxButton, NgxAlert, NgxDatepicker, NgxDropdown],
  template: `
    <div class="p-8 space-y-4">
      <!-- Button -->
      <lib-ngx-button 
        variant="primary" 
        [loading]="isLoading"
        (click)="handleClick()">
        Save Changes
      </lib-ngx-button>

      <!-- Alert -->
      <lib-ngx-alert
        type="success"
        title="Success!"
        message="Your changes have been saved.">
      </lib-ngx-alert>

      <!-- Datepicker -->
      <lib-ngx-datepicker 
        [(value)]="selectedDate">
      </lib-ngx-datepicker>

      <!-- Dropdown -->
      <lib-ngx-dropdown
        label="Category"
        [options]="categories"
        [(value)]="selectedCategory">
      </lib-ngx-dropdown>
    </div>
  `
})
export class DemoComponent {
  isLoading = false;
  selectedDate: Date | null = null;
  selectedCategory: string | null = null;
  
  categories = [
    { label: 'Technology', value: 'tech' },
    { label: 'Design', value: 'design' },
    { label: 'Business', value: 'business' }
  ];

  handleClick() {
    this.isLoading = true;
    setTimeout(() => this.isLoading = false, 2000);
  }
}

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

NgxModal

A highly customizable modal component with glassmorphism support, animations, and programmatic control.

Usage

<lib-ngx-modal
  [isOpen]="isModalOpen"
  title="My Modal"
  size="md"
  headerColor="bg-blue-600"
  icon="info"
  (close)="isModalOpen = false">
  
  <p>Modal content goes here...</p>
  
  <div modal-footer class="flex justify-end gap-2">
    <lib-ngx-button (click)="isModalOpen = false">Close</lib-ngx-button>
  </div>
</lib-ngx-modal>

Inputs

| Input | Type | Default | Description | |-------|------|---------|-------------| | isOpen | boolean | false | Controls the visibility of the modal. | | title | string | '' | The title displayed in the header. | | size | 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full' | 'md' | The width of the modal. | | animation | 'fade' \| 'slideDown' \| 'slideUp' \| 'zoom' \| 'bounce' \| 'flip' | 'slideDown' | Entrance animation effect. | | headerColor | string | '' | Background color for the header (e.g., 'bg-blue-500' or '#007bff'). | | icon | string | '' | Material Symbol name to display in the header. | | showCloseButton | boolean | true | Whether to show the 'X' close button. | | closeOnBackdrop | boolean | true | Whether clicking the backdrop closes the modal. | | closeOnEscape | boolean | true | Whether pressing ESC closes the modal. | | customClass | string | '' | Custom CSS class for the modal container. |

Outputs

| Output | Description | |--------|-------------| | close | Emitted when the modal should close (backdrop click, ESC, close button). | | afterOpen | Emitted after the modal open animation completes. | | afterClose | Emitted after the modal close animation completes. |

Programmatic Usage

You can also open modals dynamically using NgxModalService.

import { NgxModalService } from 'ngx-lite-suite';

@Component({ ... })
export class MyComponent {
  private modalService = inject(NgxModalService);

  openModal() {
    const modalRef = this.modalService.open({
      title: 'Dynamic Modal',
      size: 'lg',
      headerColor: 'bg-indigo-600',
      icon: 'rocket_launch'
    });
    
    // Subscribe to close event
    modalRef.instance.close.subscribe(() => {
      this.modalService.close();
    });
  }
}

📄 License

MIT

🔗 Links

• npm Package
• GitHub Repository
• Report Issues