Taiga UI: The highly customisable Angular alternative
In the world of Angular development, Angular Material is often the first choice for UI components. But what if a project requires more flexibility, a more modern design or better performance? This is where Taiga UI comes in – a powerful, open-source UI kit that is quickly becoming one of the most compelling alternatives.
What exactly is Taiga UI, what are its core concepts, and why could it be the perfect choice for your next project? You can find a great practical example of how Taiga UI looks in a complex application in the t2informatik exchange on GitHub. [1]
What makes Taiga UI so special?
Taiga UI is more than just another component library. It is a well-designed ecosystem built on four pillars: performance, customisability, best practices, and a huge feature set.
1. Modularity and treeshaking for maximum performance
One of Taiga UI’s most outstanding features is its consistently modular architecture. By using secondary entry points, you can ensure that only the components, services, or directives you actually use end up in your final bundle. The result: the smallest possible bundle size and faster loading times for your application.
2. Limitless customisability
Where other libraries reach their limits, Taiga UI shines. It was developed from the ground up for easy and deep customisation. With the help of CSS custom properties, you can dynamically change the theming (e.g. dark mode) at runtime without having to recompile the application. In addition, flexible component architectures allow you to use custom templates to design the functionality and appearance according to your preferences.
3. Modern architecture and best practices
The team behind Taiga UI attaches great importance to clean and maintainable code. The library consistently uses modern Angular concepts:
- Dependency injection (DI): For a clean and decoupled architecture.
- OnPush change detection: Ensures optimised performance by triggering change detection only when demand is present.
- Strict TypeScript mode: Guarantees maximum type safety and reduces errors during development.
4. An impressive variety of components
From simple elements such as buttons and forms to highly complex components such as a customisable date picker, interactive charts or a PDF viewer – Taiga UI offers a huge selection of ready-made solutions for almost every use case.
Getting started: Set up Taiga UI in 3 minutes
Integrating Taiga UI into an existing Angular project is very easy.
1. Installation:
- Angular CLI: ng add taiga-ui
- Nx Workspace: npm i @taiga-ui && nx g @taiga-ui/schematics:ng-add
The schematic takes care of all the necessary configurations, from module imports to global styles.
2. Basic setup:
Add the basic Taiga UI modules to your app.component.ts:
import {Component} from '@angular/core';
import {TuiRootModule, TuiDialogModule, TuiAlertModule} from '@taiga-ui/core';
@Component({
standalone: true,
selector: 'app-root',
imports: [TuiRootModule, TuiDialogModule, TuiAlertModule],
templateUrl: './app.component.html',
})
export class AppComponent {}
Anschließend fügen Sie den Root-Container in Ihr app.component.html ein:
<tui-root>
<router-outlet></router-outlet>
</tui-root>That’s it! You can now use all components from the library.
The Taiga UI ecosystem: structure and components
Taiga UI has a clear structure and is divided into several packages. Integration is done via classes (class=‘tui-text_h1’).
- Foundations: Design basics such as typography, colours, breakpoints and global styles.
- Components: The core of the library with elements such as Accordion, Avatar, Buttons, PdfViewer and Tree.
- Layout: Everything related to forms and structured inputs, e.g. InputSearch.
- Navigation: Components for page navigation such as Pagination and TabBar.
- Charts: Customisable charts such as BarChart and LineChart.
- Customisation: Tools for dialogues, internationalisation (i18n) and viewport management.
- Tools: Directives, pipes, services and utils (formatting, DOM manipulation, mathematics and much more) that go beyond pure UI components.
In addition, Taiga UI offers specialised add-on packages for advanced use cases:
- @taiga-ui/addon-doc: Framework for creating documentation websites with live code examples (<tui-doc-example>).
- @taiga-ui/addon-mobile: Mobile-specific components and behaviours, e.g. customised date pickers or dropdowns.
- @taiga-ui/addon-commerce: Components and utilities for e-commerce, such as currencies, credit card input fields, and other payment elements.
The result is a well-designed ecosystem that goes far beyond classic UI components and offers Angular developers maximum flexibility.
Taiga UI vs. Angular Material: A direct comparison
Choosing a UI library is one of the most important decisions in an Angular project. While Angular Material is considered the proven standard, Taiga UI is challenging this status with a fresh and extremely flexible approach. But what exactly are the key differences? Let’s take a closer look at the two contenders.
Design
Angular Material: Strictly adheres to the Material Design guidelines defined by Google. The result is a professional, recognisable design with flat surfaces, clear shades and a proven user experience familiar from Google products. The approach is rather conservative and aims for consistency.
Taiga UI: Deliberately breaks out of this rigid framework. With a sleeker aesthetic, smooth transitions and rounded corners, the design appears more modern and lighter. Taiga UI deliberately offers developers and designers more creative freedom to create an individual and unique brand identity.
Figure: Comparison of Taiga UI and Angular Material
Customisability
Angular Material: Customisation is primarily done via SCSS mixins, which can be used to define the global colour scheme (primary, accent, warning). However, profound visual changes to the structure or style of individual components are often complex and require cumbersome CSS overrides.
Taiga UI: Designed from the ground up for maximum flexibility. By using CSS variables and design tokens, changes can be made dynamically without recompiling. The component architecture is also more open, which greatly simplifies the embedding of user-defined content and logic.
Functionality
Angular Material: Offers a solid and reliable selection of core components that are seamlessly integrated into the Angular ecosystem. The close connection to the Angular team guarantees excellent documentation and maintenance. The focus is clearly on the essential building blocks for classic business applications.
Taiga UI: Goes far beyond the standard repertoire. It provides a much broader range of components, tools and utilities that also cover complex use cases such as diagrams or the integration of web APIs. The modular structure in small, Treeshake-enabled packages ensures that the application remains lean.
Performance
Angular Material: Is also modular, but has fixed dependencies on the powerful but also extensive Angular Component Development Kit (CDK). If not all modules are carefully imported, this can potentially lead to larger final bundles.
Taiga UI: Is consistently optimised for treeshaking. Thanks to its granular package structure, only the code that is actually used ends up in production. This usually results in smaller bundle sizes and noticeably faster loading times.
Community & Support
Angular Material: Benefits from the huge, global Angular community and official support from the Google team. This means high stability, regular updates and a wealth of tutorials, forum posts and third-party tools.
Taiga UI: Actively developed by Tinkoff and used in their own highly scalable applications. The community is smaller but very active and engaged. The commercial background ensures professional development and reliable support.
Conclusion
Taiga UI is an impressively mature and feature-rich UI library for Angular that is an excellent alternative to Angular Material. If your project has high requirements for customisability, performance and modern design, you should definitely give Taiga UI a try.
Its well-thought-out architecture, huge selection of components and growing ecosystem make it a tool that can massively increase developer productivity.
Notes:
One point to keep in mind: For more complex scenarios, such as unit testing components based on Taiga UI or server-side rendering with Angular Universal, a fallback mechanism may be necessary, as some components rely on browser APIs. However, the documentation offers solutions for this.
[1] t2informatik exchange on GitHub
You can find more information about Taiga UI here.
Would you like to discuss this topic as an opinion leader? Then feel free to share this post on social media or within your network.
Tammo Nitsche
Tammo Nitsche works at t2informatik as a software consultant. He develops innovative solutions in close cooperation with partners and local contacts in various customer projects. Since April 2020, he has been working in web development, mainly in the front-end but also in the back-end area. He sees his professional future in the full-stack area.
In the t2informatik Blog, we publish articles for people in organisations. For these people, we develop and modernise software. Pragmatic. ✔️ Personal. ✔️ Professional. ✔️ Click here to find out more.