ngx-com
v0.1.4
Published
A modern Angular component library built with signals, Tailwind CSS, and semantic design tokens
Downloads
1,892
Maintainers
cdevhub.comReadme
ngx-com
An Angular component library built with signals, Tailwind CSS v4, and semantic design tokens. Requires Angular 21+.
Installation
npm install ngx-comPeer dependencies
Required:
| Package | Version |
| --- | --- |
| @angular/common | ^21.0.0 |
| @angular/core | ^21.0.0 |
| @angular/cdk | ^21.0.0 |
| @angular/forms | ^21.0.0 |
| rxjs | ^7.8.0 |
npm install @angular/cdk @angular/forms rxjs
@angular/commonand@angular/coreare already present in every Angular project.
Optional:
| Package | Version | When needed |
| --- | --- | --- |
| @angular/router | ^21.0.0 | Only if using routed tab navigation (comTabNavBar) |
| lucide-angular | >=0.575.0 <1.0.0 | Only if using the Lucide icon adapter |
# Install optional peer dependencies as needed
npm install @angular/router # for routed tabs
npm install lucide-angular # for Lucide icon adapterSetup
1. Import the theme styles
Add the library theme CSS to your application's stylesheet. This provides design tokens (colors, shadows, durations) and theme variants.
/* styles.css */
@import 'ngx-com/styles/themes.css';Or import individual files for finer control:
| File | Contents |
| ------------------ | --------------------------------------------- |
| tokens.css | Base semantic tokens (light theme) |
| dark.css | Dark theme override ([data-theme='dark']) |
| forest.css | Forest theme ([data-theme='forest']) |
| ocean.css | Ocean theme ([data-theme='ocean']) |
| candy.css | Candy theme ([data-theme='candy']) |
| animations.css | Keyframe animations used by components |
| utilities.css | Utility classes |
Switch themes at runtime by setting data-theme on the <html> element:
<html data-theme="dark">2. Add Tailwind source for ngx-com
Library components use Tailwind utility classes in their templates. Tell Tailwind to scan the installed package so those classes are generated:
/* styles.css */
@source "../../node_modules/ngx-com";The path is relative to your CSS file. Adjust the depth if your stylesheet is not at
src/styles.css. For pnpm with strict hoisting, the path may be../../node_modules/.pnpm/ngx-com@*/node_modules/ngx-com.
3. Import CDK overlay styles
Components that use overlays (dropdown, dialog, popover, tooltip, confirm, menu, toast) require the CDK overlay stylesheet:
@import '@angular/cdk/overlay-prebuilt.css';4. Register icons (optional)
If using the <com-icon> component with Lucide icons:
import { provideComLucideIcons } from 'ngx-com/components/icon/lucide';
import { Check, ChevronDown, X } from 'lucide-angular/icons/';
export const appConfig: ApplicationConfig = {
providers: [
provideComLucideIcons({ Check, ChevronDown, X }),
],
};Icons can also be registered at the route or component level. For custom
(non-Lucide) SVG icons, use provideComIcons from ngx-com/components/icon.
Usage
Every component is a standalone import from its own entry point:
import { ComButton } from 'ngx-com/components/button';
import { ComDropdown, ComDropdownOption } from 'ngx-com/components/dropdown';<button comButton color="primary">Save</button>
<com-dropdown [(value)]="selected" [options]="items" />Components
| Component | Import path | Description |
| ------------------ | ---------------------------------------- | ------------------------------------ |
| Alert | ngx-com/components/alert | Contextual feedback messages |
| Avatar | ngx-com/components/avatar | User or entity avatar |
| Badge | ngx-com/components/badge | Small status indicator |
| Button | ngx-com/components/button | Standard button directive |
| Calendar | ngx-com/components/calendar | Date calendar grid |
| Card | ngx-com/components/card | Content container with sections |
| Carousel | ngx-com/components/carousel | Slideshow component |
| Checkbox | ngx-com/components/checkbox | Checkbox input control |
| Code Block | ngx-com/components/code-block | Syntax-highlighted code display |
| Collapsible | ngx-com/components/collapsible | Expandable content section |
| Confirm | ngx-com/components/confirm | Confirmation popover |
| Datepicker | ngx-com/components/datepicker | Date input with calendar popup |
| Dialog | ngx-com/components/dialog | Modal dialog service |
| Dropdown | ngx-com/components/dropdown | Select / multi-select control |
| Empty State | ngx-com/components/empty-state | Placeholder for empty content |
| Form Field | ngx-com/components/form-field | Input wrapper with label and errors |
| Icon | ngx-com/components/icon | SVG icon renderer |
| Item | ngx-com/components/item | List item layout |
| Menu | ngx-com/components/menu | Dropdown menu with keyboard nav |
| Native Control | ngx-com/components/native-control | Styled native input/textarea |
| Paginator | ngx-com/components/paginator | Pagination control |
| Popover | ngx-com/components/popover | Floating content panel |
| Radio | ngx-com/components/radio | Radio button group |
| Segmented Control | ngx-com/components/segmented-control | Toggle between options |
| Separator | ngx-com/components/separator | Horizontal/vertical divider |
| Sort | ngx-com/components/sort | Column sort header for tables |
| Spinner | ngx-com/components/spinner | Loading indicator |
| Switch | ngx-com/components/switch | Toggle switch control |
| Table | ngx-com/components/table | Data table with sorting |
| Tabs | ngx-com/components/tabs | Tabbed navigation |
| Timepicker | ngx-com/components/timepicker | Time input control |
| Toast | ngx-com/components/toast | Toast notification service |
| Tooltip | ngx-com/components/tooltip | Hover/focus tooltip |
Utilities
General-purpose utilities are available from ngx-com/utils.
Requirements
- Angular
^21.0.0(@angular/common,@angular/core,@angular/forms) @angular/cdk^21.0.0- RxJS
^7.8.0 - Tailwind CSS v4 (in the consuming application)
@angular/router^21.0.0(optional — for routed tab navigation)lucide-angular>=0.575.0 <1.0.0(optional — for Lucide icon adapter)
License
MIT