Angular has evolved rapidly over the past few releases. With Signals, standalone components, improved control flow, and the growing adoption of zoneless applications, it felt like the right time to rethink what a modern Angular UI library should look like.
That's why I started building NGXSMK UI Kit.
GitHub Repository: https://github.com/NGXSMK/ngxsmk-ui-kit
Demo: https://ngxsmk.github.io/ngxsmk-ui-kit/
Why another Angular UI library?
The Angular ecosystem already has several excellent UI libraries. My goal isn't to replace them.
Instead, I wanted to build a UI kit that embraces modern Angular patterns from the beginning while remaining lightweight, developer friendly, and easy to customize.
The focus is on:
- Signals-first architecture
- Standalone components
- Zoneless-ready design
- Universal design tokens
- Accessibility
- Beautiful developer experience
- MIT Open Source
Key Features
✨ Signals-native architecture
Built with Angular Signals to align with Angular's future direction.
⚡ Zoneless-ready
Designed with modern Angular applications in mind, reducing unnecessary change detection complexity.
🎨 Universal Token Theming
Customize colors, spacing, typography, radius, shadows, and more using design tokens.
🧩 Growing Component Collection
The goal is to provide over 200 reusable components including:
- Buttons
- Inputs
- Cards
- Dialogs
- Toasts
- Tables
- Navigation
- Forms
- Charts
- Layout components
- Data display
- Overlays
- Utilities
🌙 Dark Mode
Create consistent light and dark themes with minimal configuration.
♿ Accessibility
Keyboard navigation, semantic HTML, and accessibility best practices are part of the design process.
📱 Responsive
Components are designed to work across desktop, tablet, and mobile devices.
Built for Modern Angular
NGXSMK UI Kit targets Angular 17.3+ and follows modern Angular development practices.
The project embraces:
- Standalone APIs
- Signals
- Tree-shakable architecture
- Reusable composition
- Performance-first design
Example
<ngx-button variant="primary">
Get Started
</ngx-button>
Simple components should stay simple.
The Vision
I don't want this project to become just another collection of UI components.
The long-term vision is to create a complete ecosystem that includes:
- Component library
- Theme builder
- Design token system
- Dashboard templates
- Landing page templates
- Form builder
- Charts
- Documentation site
- Interactive playground
- Figma resources
- CLI scaffolding
- AI-ready component documentation
Roadmap
Some upcoming goals include:
- 200+ production-ready components
- Advanced Data Table
- Date Picker
- Scheduler
- Rich Text Editor
- Charts
- Kanban Board
- File Upload
- Drag & Drop
- Virtual Scroll
- Dashboard Templates
- Theme Generator
- Documentation improvements
- More examples
- Better accessibility coverage
Why Open Source?
Open source helps everyone build better software.
I hope NGXSMK UI Kit becomes a community-driven project where developers can:
- Report issues
- Suggest improvements
- Contribute components
- Improve documentation
- Share ideas
- Build plugins
Every contribution, whether it's code, documentation, or feedback, is appreciated.
I'd Love Your Feedback
The project is still growing, and community feedback is incredibly valuable.
If you're an Angular developer, I'd love to hear:
Which components are you missing?
What features matter most to your team?
What would make you switch from your current UI library?
Which Angular features should this project embrace next?
Feel free to open an issue or start a discussion on GitHub.
⭐ If you find the project interesting, consider giving it a star. It helps more Angular developers discover the project.
Repository:
https://github.com/NGXSMK/ngxsmk-ui-kit
Demo: https://ngxsmk.github.io/ngxsmk-ui-kit/
Thanks for reading, and happy coding! 🚀
Top comments (0)