Enterprise-grade Angular UI component library built with Tailwind CSS
Synerity UI is a comprehensive, accessible, and performant Angular component library that combines the power of Angular 20+ with the flexibility of Tailwind CSS. Built with enterprise standards in mind, it provides 90+ components designed for modern web applications.
- Tailwind CSS Integration: Pure utility-first styling with complete design flexibility
- Custom Theme System: Extensible color palette and design tokens
- Responsive Design: Mobile-first approach with built-in responsive utilities
- Dark Mode Ready: Built-in support for dark/light theme switching
- WCAG 2.1 AA Compliant: Full accessibility compliance out of the box
- Screen Reader Support: Comprehensive ARIA attributes and announcements
- Keyboard Navigation: Complete keyboard accessibility for all components
- Focus Management: Advanced focus handling and trap utilities
- High Contrast Support: Optimized for high contrast mode
- Minimal Bundle Size: ~50KB gzipped (vs 200KB+ competitors)
- Tree Shaking: Full tree-shaking support for optimal bundle sizes
- Lazy Loading: Components load only when needed
- Optimized Rendering: Built for Angular 20+ with Ivy renderer
- TypeScript First: Full type safety with comprehensive interfaces
- Testing: 90%+ test coverage with Jest and Angular Testing Utilities
- Documentation: Comprehensive docs with live examples
- Semantic Versioning: Predictable release cycle with breaking change documentation
- Angular 20.3.0 or higher
- Node.js 18+ and npm/yarn
- Tailwind CSS 3.4+
npm install @synerity/uinpm install tailwindcss @angular/common @angular/core @angular/formsAdd to your tailwind.config.js:
module.exports = {
content: [
'./src/**/*.{html,ts}',
'./node_modules/@synerity/ui/**/*.{html,ts}'
],
theme: {
extend: {
// Your custom theme extensions
}
},
plugins: []
}Add to your styles.scss:
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SuiModule } from '@synerity/ui';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
SuiModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }<!-- Button Component -->
<sui-button variant="primary" size="lg" (click)="handleClick()">
Click Me
</sui-button>
<!-- Input Component -->
<sui-input-text
placeholder="Enter your name"
[(ngModel)]="name"
[disabled]="false">
</sui-input-text>
<!-- Card Component -->
<sui-card>
<sui-card-header>
<h3>Card Title</h3>
</sui-card-header>
<sui-card-content>
<p>Card content goes here...</p>
</sui-card-content>
<sui-card-footer>
<sui-button variant="outline">Action</sui-button>
</sui-card-footer>
</sui-card>- InputText - Basic text input with validation states
- InputNumber - Numeric input with formatting
- InputMask - Pattern-based input masking
- Password - Password input with visibility toggle
- Textarea - Multi-line text input
- Checkbox - Single and group checkboxes
- RadioButton - Radio button groups
- Select - Dropdown selection
- AutoComplete - Searchable dropdown with async data
- MultiSelect - Multiple selection dropdown
- DatePicker - Date selection with calendar
- ColorPicker - Color selection interface
- Slider - Range input component
- Rating - Star rating component
- ToggleSwitch - On/off toggle
- ToggleButton - Toggle button group
- InputGroup - Input with addons
- FloatLabel - Floating label inputs
- KeyFilter - Input validation patterns
- CascadeSelect - Hierarchical selection
- TreeSelect - Tree-based selection
- Listbox - Multi-selection list
- PickList - Dual list selection
- OrderList - Reorderable list
- InputOtp - One-time password input
- Knob - Circular input control
- SelectButton - Button group selection
- Editor - Rich text editor
- IconField - Input with icon
- IftaLabel - Conditional label
- Button - Primary, secondary, and variant buttons
- SpeedDial - Floating action button
- SplitButton - Dropdown button
- Table - Sortable, filterable data table
- Paginator - Table pagination
- DataView - List/grid view switcher
- Tree - Hierarchical data display
- TreeTable - Tree structure in table format
- Timeline - Chronological data display
- VirtualScroller - Performance-optimized lists
- OrgChart - Organizational chart
- OrderList - Reorderable list
- PickList - Dual list selection
- Card - Content container with header/body/footer
- Panel - Collapsible content panel
- Divider - Visual content separator
- Fieldset - Form field grouping
- Accordion - Collapsible content sections
- Tabs - Tabbed content interface
- Stepper - Step-by-step process indicator
- Toolbar - Action button container
- ScrollPanel - Custom scrollable area
- Splitter - Resizable panel splitter
- Dialog - Modal dialog system
- Drawer - Slide-out panel
- Popover - Contextual information overlay
- Tooltip - Hover information display
- ConfirmDialog - Confirmation modal
- ConfirmPopup - Inline confirmation
- DynamicDialog - Programmatic dialog creation
- Upload - File upload with drag & drop
- Menu - Context menu
- Menubar - Horizontal navigation menu
- Breadcrumb - Navigation breadcrumbs
- ContextMenu - Right-click context menu
- Dock - Application dock
- MegaMenu - Large dropdown menu
- PanelMenu - Panel-based menu
- TieredMenu - Multi-level menu
- Chart - Chart.js integration wrapper
- Message - Inline message display
- Toast - Notification toast system
- Image - Enhanced image component
- Carousel - Image/content carousel
- Galleria - Image gallery
- ImageCompare - Before/after image comparison
- Avatar - User profile image
- Badge - Status indicators
- Chip - Tag-like elements
- ProgressBar - Progress indication
- ProgressSpinner - Loading spinner
- Skeleton - Loading placeholders
- ScrollTop - Back to top button
- Ripple - Material design ripple effect
- FocusTrap - Focus management utility
- BlockUI - UI blocking overlay
- Fluid - Responsive layout utility
- Inplace - Inline editing
- MeterGroup - Progress meters
- Tag - Label components
- Terminal - Terminal-like interface
- AnimateOnScroll - Scroll animations
- AutoFocus - Auto-focus directive
- StyleClass - Dynamic class management
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: {
50: '#eff6ff',
500: '#3b82f6',
900: '#1e3a8a'
},
// Your custom colors
}
}
}
}<!-- Button variants -->
<sui-button variant="primary">Primary</sui-button>
<sui-button variant="secondary">Secondary</sui-button>
<sui-button variant="outline">Outline</sui-button>
<sui-button variant="ghost">Ghost</sui-button>
<!-- Button sizes -->
<sui-button size="sm">Small</sui-button>
<sui-button size="md">Medium</sui-button>
<sui-button size="lg">Large</sui-button>- Node.js 18+
- Angular CLI 20.3+
- Git
# Clone the repository
git clone https://github.com/your-org/synerity-ui.git
cd synerity-ui
# Install dependencies
npm install
# Start the demo application
npm run start
# Build the library
npm run build:lib
# Run tests
npm run testsynerity-ui/
├── projects/
│ ├── ui-lib/ # Main library package
│ │ ├── src/
│ │ │ ├── lib/
│ │ │ │ ├── components/ # All component modules
│ │ │ │ ├── directives/ # Custom directives
│ │ │ │ ├── pipes/ # Custom pipes
│ │ │ │ ├── services/ # Shared services
│ │ │ │ ├── types/ # TypeScript interfaces
│ │ │ │ └── utils/ # Utility functions
│ │ │ └── public-api.ts # Library exports
│ │ └── package.json
│ └── demo-app/ # Documentation/demo app
│ ├── src/
│ │ ├── app/
│ │ │ ├── components/ # Component demos
│ │ │ ├── pages/ # Documentation pages
│ │ │ └── shared/ # Shared demo utilities
│ │ └── styles/ # Demo app styles
│ └── package.json
├── docs/ # GitHub Pages documentation
├── tests/ # E2E and integration tests
└── tools/ # Build and deployment scripts
# Development
npm run start # Start demo app
npm run build # Build demo app
npm run build:lib # Build library
npm run watch # Watch mode for library
# Testing
npm run test # Run unit tests
npm run test:coverage # Run tests with coverage
npm run e2e # Run e2e tests
# Linting & Formatting
npm run lint # Run ESLint
npm run format # Format code with Prettier
# Publishing
npm run build:lib:prod # Build library for production
npm run publish:lib # Publish to NPM- Framework: Jest + Angular Testing Utilities
- Coverage: 90%+ target coverage
- Strategy: Component, service, and utility testing
- Framework: Angular Testing Utilities
- Focus: Component interaction and data flow
- Framework: Playwright
- Coverage: Critical user flows and accessibility
- Tool: axe-core integration
- Standard: WCAG 2.1 AA compliance
- Demo Site: https://synerity-ui.github.io
- Component Showcase: Interactive examples for all components
- API Reference: Comprehensive API documentation
- Getting Started: Step-by-step setup guide
- Interactive Examples: Live component demos
- Code Snippets: Copy-paste ready code examples
- Accessibility Guide: WCAG compliance documentation
- Theming Guide: Customization instructions
- Migration Guide: Version upgrade instructions
We welcome contributions! Please see our Contributing Guide for details.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- TypeScript: Strict mode enabled
- ESLint: Enforced code quality rules
- Prettier: Consistent code formatting
- Conventional Commits: Standardized commit messages
- Testing: Required for all new features
- Accessibility First: All components must be WCAG 2.1 AA compliant
- Tailwind CSS Only: No custom CSS, use utility classes
- TypeScript: Full type safety with comprehensive interfaces
- Testing: Unit tests required for all components
- Documentation: Usage examples and API documentation required
| Library | Bundle Size (gzipped) | Components |
|---|---|---|
| Synerity UI | ~50KB | 90+ |
| Angular Material | ~200KB | 50+ |
| PrimeNG | ~500KB | 80+ |
| ng-bootstrap | ~150KB | 30+ |
- Initial Load: < 100ms component render time
- Bundle Size: < 50KB gzipped
- Tree Shaking: Full support for optimal bundle sizes
- Memory Usage: Optimized for large applications
- Project setup and architecture
- Core components (Button, Input, Card)
- Tailwind CSS integration
- Demo application
- Basic documentation
- Complete form component suite (30 components)
- Advanced form validation
- Form builder utilities
- Goal: 1K+ GitHub stars, 10K+ weekly downloads
- Data display components (Table, Tree, etc.)
- Panel and layout components
- Advanced data visualization
- Goal: 2.5K+ GitHub stars, 25K+ weekly downloads
- Overlay and modal components
- Menu and navigation components
- File handling components
- Goal: 5K+ GitHub stars, 50K+ weekly downloads
- Media and utility components
- Advanced theming system
- Internationalization (i18n)
- Performance monitoring
- Goal: 7.5K+ GitHub stars, 75K+ weekly downloads, Top 5 Angular UI library
This project is licensed under the MIT License - see the LICENSE file for details.
- Angular Team - For the amazing framework
- Tailwind CSS Team - For the utility-first CSS framework
- Community Contributors - For feedback and contributions
- Accessibility Advocates - For ensuring inclusive design
- Documentation: https://synerity-ui.github.io
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Discord: Join our community
Built with ❤️ by the Synerity UI Team
Empowering developers to build beautiful, accessible, and performant Angular applications.