A comprehensive Angular component library built with Tailwind CSS, providing a modern and customizable set of UI components for Angular applications.
npm install ngx-twA comprehensive Angular component library built with Tailwind CSS, providing a modern and customizable set of UI components for Angular applications.
``bash`
npm install ngx-tw
1. Import the tailwind component in your Angular component:
`typescript
import { TwButton } from "ngx-tw";
@NgModule({
imports: [TwButton],
// ...
})
export class AppComponent {}
`
2. Import the default styles in your styles.scss:
`scss`
@import "ngx-tw/default";
Interactive notification components for displaying important messages to users.
`html`
Features:
- Multiple alert types: info, error, warning, success
- Customizable duration and actions
- Icon support with custom colors
- Primary and secondary action buttons
Service Usage:
`typescript
import { AlertService } from 'ngx-tw';
constructor(private alertService: AlertService) {}
showAlert() {
this.alertService.show({
title: 'Success!',
description: 'Operation completed successfully',
type: 'info',
duration: 3000
});
}
`
Smart input component with search and suggestion capabilities.
`html`
Features:
- Dynamic filtering and searching
- Keyboard navigation support
- Custom option templates
- Async data loading
Versatile button component with multiple styles and configurations.
`html`
Properties:
- type: 'basic' | 'primary' | 'secondary'color
- : Color theme variantsrounded
- : Border radius optionsdisabled
- : Boolean stateisSubmit
- : Form submission type
Icon-only button for compact interfaces.
`html`
Grouped button controls for related actions.
`html`
Full-featured calendar component with date selection and range support.
`html`
Features:
- Single date selection
- Date range selection
- Min/max date constraints
- Multiple view modes (days, months, years)
- Keyboard navigation
- Today highlighting
Tag-like components for displaying categories, filters, or selections.
`html`
Features:
- Editable chip lists
- Custom separators
- Icon support
- Color theming
- Dynamic chip creation
Specialized date range picker component.
`html`
Modal dialog service for displaying overlays and confirmations.
`typescript
import { DialogService } from 'ngx-tw';
constructor(private dialog: DialogService) {}
openDialog() {
this.dialog.open(MyDialogComponent, {
width: '400px',
data: { message: 'Hello World' }
});
}
`
Accordion-style expandable content sections.
` Expandable content goes herehtml`
Grouped Expanders:
`html`
SVG icon component with dynamic loading and caching.
`html`
Features:
- SVG icon support
- Icon registry and caching
- Heroicons integration
- Custom size control
- Dynamic icon loading
Comprehensive form input component with validation and styling.
`html`
Features:
- Multiple input types
- Prefix/suffix icons
- Validation support
- Multiline textarea mode
- Form control integration
- Error display
Specialized input with formatting masks.
`html`
Dropdown menu component with nested support.
`html
`
Directives:
- twMenuTrigger: Trigger for opening menustwMenuItem
- : Menu item directive
Advanced select dropdown with search and custom options.
`html
`
Features:
- Searchable options
- Keyboard navigation
- Custom option indicators
- Multi-selection support
- Async option loading
Loading placeholder components for better UX.
`html`
Directive Usage:
` Content that will be replaced with skeleton when loadinghtml`
Loading spinner for indicating async operations.
`html`
Header component that sticks to the top during scroll.
`html`
Section Title
Toggle switch component for boolean inputs.
`html`
Tab navigation component for organizing content.
` Content for tab 1 Content for tab 2html`
Advanced data table with sorting, pagination, and customization.
`html
`
Features:
- Column definitions
- Sorting and filtering
- Pagination
- Custom cell templates
- Row selection
Application toolbar with actions and navigation.
`html`
Comprehensive drag and drop functionality.
` html`
{{ item }}
{{ item }}
Directives:
- twDrag: Makes elements draggabletwDropList
- : Drop zone containertwDropListGroup
- : Groups multiple drop liststwDragPlaceholder
- : Custom placeholder during dragtwDragPreview
- : Custom drag preview
Utilities:
- moveItemInArray(): Reorder items within arraytransferArrayItem()
- : Move items between arrays
The library supports multiple color themes:
- primary - Primary brand coloraccent
- - Secondary accent colordanger
- - Error/warning states
- Custom color configurations
Most components accept a color input to apply the desired theme.
ngx-tw includes built-in dark mode support using Tailwind's dark mode utilities. Components automatically adapt to dark mode when the dark class is applied to a parent element.
All components are built with responsive design principles and work seamlessly across different screen sizes using Tailwind's responsive utilities.
Components follow WCAG guidelines and include:
- Proper ARIA attributes
- Keyboard navigation support
- Screen reader compatibility
- Focus management
- High contrast support
Override component styles using Tailwind classes:
`html`
Many components accept configuration objects for advanced customization:
`typescript`
// Example: Custom chip transformer
- Angular 16+
- Tailwind CSS 3.0+
- Angular CDK 16+
This package is automatically published to NPM when changes are merged into the master branch. The CI/CD pipeline handles:
- Automated Testing - Runs all tests to ensure code quality
- Version Bumping - Automatically increments package version based on conventional commits
- Build Process - Compiles the library for distribution
- NPM Publishing - Publishes the new version to the NPM registry
- Release Notes - Generates changelog and release notes
To ensure proper versioning, please use conventional commit messages:
`bash``
feat: add new component feature # Minor version bump
fix: resolve component bug # Patch version bump
feat!: breaking change # Major version bump
docs: update documentation # No version bump
- Patch (1.0.X) - Bug fixes and small improvements
- Minor (1.X.0) - New features and components
- Major (X.0.0) - Breaking changes and major updates
We welcome contributions! Please read our Contributing Guidelines for details on:
- How to submit pull requests
- Coding standards and conventions
- Development setup and workflow
- Conventional commit format for versioning
- Component development guidelines
For major changes, please open an issue first to discuss what you would like to change.
This project is licensed under the MIT License - see the LICENSE file for details.