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)

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,FILL@100..700,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,FILL@100..700,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,FILL@100..700,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