ngx-comps

Modern Angular component library with comprehensive UI components and a powerful enterprise-grade data grid.

💎 Free & Premium Tiers

ngx-comps offers a freemium model with core features free forever and premium features available with a commercial license.

🆓 Free Tier (Always Free)

• ✅ Button component (7 variants, 3 sizes, all features)
• ✅ Input component (validation, form integration, all features)
• ✅ Select component (single/multi-select, searchable, all features)
• ✅ Basic Grid (sorting, basic rendering, events)
• ✅ Complete theming system
• ✅ Full TypeScript support
• ✅ Community support

💼 Premium Tier (Commercial License Required)

Premium features will include:

• 🔒 Advanced Grid filtering
• 🔒 Grid pagination
• 🔒 Grid grouping & aggregation
• 🔒 Grid virtual scrolling (optimized)
• 🔒 Grid row selection (multi-select)
• 🔒 Grid export (CSV, Excel)
• 🔒 Priority support
• 🔒 Custom feature requests

📢 Note: Premium features are coming soon. Current v0.1.0 includes all features in the free tier.

Features

✨ Modern Angular 21+ - Built with the latest Angular features including signals 🎨 Comprehensive Components - Button, Input, Select, Grid, and more 📊 Powerful Data Grid - Enterprise-grade data grid with advanced features 🎯 Signals-First - Leverages Angular signals for reactive state management 💅 Themeable - CSS custom properties for easy customization ♿ Accessible - WCAG 2.1 AA compliant components 📦 Tree-shakeable - Optimized bundle size with standalone components 🚀 Production Ready - Thoroughly tested and documented

Installation

npm install ngx-comps

Quick Start

Import Components

import { Component } from '@angular/core';
import { ButtonComponent, InputComponent, SelectComponent } from 'ngx-comps';

@Component({
  selector: 'app-root',
  imports: [ButtonComponent, InputComponent, SelectComponent],
  template: `
    <button comps-button variant="primary">Click Me</button>
    
    <comps-input 
      label="Email" 
      type="email"
      placeholder="Enter your email"
    />
    
    <comps-select
      label="Role"
      [options]="roleOptions"
      [searchable]="true"
    />
  `
})
export class AppComponent {
  roleOptions = [
    { label: 'Admin', value: 'admin' },
    { label: 'User', value: 'user' }
  ];
}

Import Styles

In your styles.scss:

@import 'ngx-comps/styles/theme';

Or in angular.json:

{
  "styles": [
    "node_modules/ngx-comps/styles/theme.css",
    "src/styles.scss"
  ]
}

Components

Button

• 7 variants: primary, secondary, success, warning, danger, ghost, link
• 3 sizes: sm, md, lg
• Loading state with spinner
• Disabled state
• Icon support

<button comps-button variant="primary" size="md">
  Save Changes
</button>

<button comps-button variant="danger" [loading]="isSubmitting">
  Delete
</button>

Input

• Multiple types: text, email, password, number, etc.
• Form integration with ControlValueAccessor
• Validation with error display
• Prefix/suffix icon support
• 3 sizes

<comps-input
  label="Username"
  type="text"
  placeholder="Enter username"
  hint="Must be unique"
  [error]="hasError"
  errorMessage="Username is required"
  formControlName="username"
/>

Select

• Single and multi-select modes
• Searchable dropdown
• Clearable option
• Form integration
• Disabled options
• 3 sizes

<comps-select
  label="Country"
  [options]="countries"
  [searchable]="true"
  [clearable]="true"
  formControlName="country"
/>

<comps-select
  label="Tags"
  [options]="tags"
  [multiple]="true"
  formControlName="tags"
/>

Data Grid

Enterprise-grade data grid with powerful features:

• Sortable columns
• Filtering (coming soon)
• Pagination (coming soon)
• Row selection (coming soon)
• Custom cell renderers
• FormGroup integration
• Virtual scrolling (in progress)

import { GridComponent, GridOptions, GridColumn } from 'ngx-comps';

columns: GridColumn[] = [
  { field: 'name', headerName: 'Name', sortable: true },
  { field: 'email', headerName: 'Email', sortable: true },
  { field: 'role', headerName: 'Role' }
];

gridOptions: GridOptions = {
  rowData: this.users,
  columnDefs: this.columns
};

<comps-grid
  [options]="gridOptions"
  (rowClicked)="onRowClick($event)"
  (cellClicked)="onCellClick($event)"
/>

Theming

Default Theme

ngx-comps comes with a professional default theme using CSS custom properties.

Custom Theme

Override CSS variables in your styles:

:root {
  --comps-primary_blue: #your-color;
  --comps-secondary_blue: #your-color;
  // ... more variables
}

Available CSS Variables

• Colors: 25+ color variables
• Spacing: xs, sm, md, lg, xl, 2xl
• Typography: Font sizes, weights, line heights
• Border radius: sm, md, lg, xl, full
• Shadows: sm, md, lg, xl
• Transitions: fast, base, slow

Form Integration

All form components implement ControlValueAccessor for seamless integration with Angular Forms:

import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';

myForm = new FormGroup({
  username: new FormControl(''),
  email: new FormControl(''),
  role: new FormControl(''),
  status: new FormControl([])
});

<form [formGroup]="myForm">
  <comps-input formControlName="username" label="Username" />
  <comps-input formControlName="email" label="Email" type="email" />
  <comps-select formControlName="role" [options]="roles" />
  <comps-select formControlName="status" [options]="statuses" [multiple]="true" />
</form>

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers

Requirements

• Angular 21.0.0 or higher
• TypeScript 5.9 or higher
• Node.js 18+ or 20+

Roadmap

v0.2.0 (Coming Soon)

• [ ] Modal component
• [ ] Card component
• [ ] Tabs component
• [ ] Grid filtering
• [ ] Grid pagination

v0.3.0

• [ ] Grid row selection
• [ ] Grid virtual scrolling (complete)
• [ ] Tooltip component
• [ ] Dropdown component

v0.4.0

• [ ] Date picker
• [ ] Tree component
• [ ] Accordion
• [ ] Advanced grid features (grouping, aggregation)

📄 License

ngx-comps is dual-licensed:

Free Tier - Always Free ✅

The free tier (current v0.1.0 components) can be used in any project (personal or commercial) at no cost.

Includes:

• Button, Input, Select components (all features)
• Basic Grid (sorting, basic rendering)
• Theming system

Premium Tier - Commercial License Required 💼

Premium features (when released) require a commercial license for production use.

See LICENSE file for complete terms.

Pricing (Coming Soon)

• Free: $0 - Core components, basic grid
• Pro: (TBD) - All premium grid features
• Enterprise: (TBD) - Priority support, custom features

For licensing questions: (contact info coming soon)

Contributing

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

Support

• 📧 General inquiries: (coming soon)

• 🐛 Issues: Report on npm or GitHub (when repo created)

• 💬 Community: (coming soon)

• 📧 Email: [email protected]

• 🐛 Issues: https://github.com/yourusername/ngx-comps/issues

• 📖 Documentation: https://github.com/yourusername/ngx-comps

Changelog

v0.1.0 (Initial Release)

• ✅ Button component (7 variants, 3 sizes)
• ✅ Input component (form integration, validation)
• ✅ Select component (single/multi, searchable)
• ✅ Grid component (basic features, sorting)
• ✅ Modern theming system
• ✅ Signals-based architecture
• ✅ ViewEncapsulation for global theming
• ✅ Production-ready styling