ngx-tw

A comprehensive Angular component library built with Tailwind CSS, providing a modern and customizable set of UI components for Angular applications.

📦 Installation

``bash
npm install ngx-tw
`

🚀 Quick Start

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";
`

🎨 Components

$3

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
});
}
`

$3

Smart input component with search and suggestion capabilities.

`html

`

Features:

- Dynamic filtering and searching
- Keyboard navigation support
- Custom option templates
- Async data loading

$3

Versatile button component with multiple styles and configurations.

`html
Click me
`

Properties:

- type: 'basic' | 'primary' | 'secondary'
- color: Color theme variants
- rounded: Border radius options
- disabled: Boolean state
- isSubmit: Form submission type

$3

Icon-only button for compact interfaces.

`html

`

$3

Grouped button controls for related actions.

`html




`

$3

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

$3

Tag-like components for displaying categories, filters, or selections.

`html

JavaScript
Angular

`

Features:

- Editable chip lists
- Custom separators
- Icon support
- Color theming
- Dynamic chip creation

$3

Specialized date range picker component.

`html

`

$3

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' }
});
}
`

$3

Accordion-style expandable content sections.

`html

Section Title



Expandable content goes here

`html


Item 1
Content 1


Item 2
Content 2


`

$3

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

$3

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

$3

Specialized input with formatting masks.

`html

`

$3

Dropdown menu component with nested support.

`html

Action 1
Action 2 →
Action 3



Submenu Item 1
Submenu Item 2

`

Directives:

- twMenuTrigger: Trigger for opening menus
- twMenuItem: Menu item directive

$3

Advanced select dropdown with search and custom options.

`html




Option 1
Option 2
Option 3

`

Features:

- Searchable options
- Keyboard navigation
- Custom option indicators
- Multi-selection support
- Async option loading

$3

Loading placeholder components for better UX.

`html

`

Directive Usage:

`html


`html

`

$3

Header component that sticks to the top during scroll.

`html



Section Title

`html

`

$3

Tab navigation component for organizing content.

`html




Content for tab 1

`html


Name
{{ row.name }}



Email
{{ row.email }}


`

Features:

- Column definitions
- Sorting and filtering
- Pagination
- Custom cell templates
- Row selection

$3

Application toolbar with actions and navigation.

`html




`

$3

Comprehensive drag and drop functionality.

`html


- twDrag: Makes elements draggable
- twDropList: Drop zone container
- twDropListGroup: Groups multiple drop lists
- twDragPlaceholder: Custom placeholder during drag
- twDragPreview: Custom drag preview

Utilities:

- moveItemInArray(): Reorder items within array
- transferArrayItem(): Move items between arrays

🎨 Theming

The library supports multiple color themes:

- primary - Primary brand color
- accent - Secondary accent color
- danger - Error/warning states
- Custom color configurations

Most components accept a color input to apply the desired theme.

🌙 Dark Mode

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.

📱 Responsive Design

All components are built with responsive design principles and work seamlessly across different screen sizes using Tailwind's responsive utilities.

♿ Accessibility

Components follow WCAG guidelines and include:

- Proper ARIA attributes
- Keyboard navigation support
- Screen reader compatibility
- Focus management
- High contrast support

🔧 Customization

$3

Override component styles using Tailwind classes:

`html
Custom Button
`

$3

Many components accept configuration objects for advanced customization:

`typescript
// Example: Custom chip transformer

`

📋 Requirements

- Angular 16+
- Tailwind CSS 3.0+
- Angular CDK 16+

🚀 Release & Publishing

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

$3

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
``

$3

- 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

🤝 Contributing

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.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.