Taiga UI is a new Angular UI Kit that you should try

Hey, Angular devs!

@waterplea and I write articles about Angular on different blogs from time to time. We wrote almost all of them based on our experience of developing a big UI component library. We've been developing, refactoring and growing it for several years and testing our ideas on a big number of projects in our company.

We are happy to announce that we published our library into open source!

In this article I want to write about concepts and practices that we build our library with and tell you why you should try it for both new and old projects even with other components or UI libraries.

Completely modular

Let’s start with project organization. Taiga UI includes several layers of abstractions as separate packages.

@taiga-ui/cdk

It is a fundamental package. There are many Angular directives, services, tokens, base classes and utils for more safe, abstract and easy work with Angular. This package can be used as an additional multi-tool for your Angular application of any complexity. It can be also a basis for creating your own UI Kit.

Examples of entities:

• TuiDestroyService to simplify “destroy$” subjects in components
• TuiFilterPipe and TuiMapperPipe to handle values in a template without extra ChangeDetection cycles
• tuiPure decorator to memoize getters or class methods

Our “cdk” is different from “@angular/cdk”. It is not a problem to use both of them, because it is not alternative, but addition

@taiga-ui/core

This package includes basic components for building an interface and some tools to make apps easier. Here you can find things like root components, portals for dialogs and dropdowns, theming and animations. Core is a foundation for other packages with UI components. Design and common styles start here.

@taiga-ui/kit

It is a large package that includes many components for building any interface. There are both simple components like avatar, tag or toggle and also composite as for example an input date component that is built with three basic components: textfield with a mask, dropdown and calendar.

@taiga-ui/addon-*

Addons are several thematic packages that are built with cdk, core and kit. There are for example charts package, commerce package for working with currencies, money and card input. There is also a specific doc package that give tools to build your own demo portal as ours (the link will be below 🙂)

We have the following structure with high-level packages built with base packages:

Here comes an important question: why do I need to install several packages as dependencies if I only need a couple of components? What is their size?

Well, we rewrote the structure of our libraries a few months ago. We moved all our packages to the Secondary Entry Points concept.

But we also needed to keep the previous API of imports from the root of the package. That is why we built it in a unique way where every folder deeper is a Secondary Entry Point for the folder higher.

Now all our packages give an opportunity to import entities both from Primary Entry Point and any level of depth.

By the way, the first option is sufficient because nesting can be solved by builder automatically. You do not need to think about depth of import.

This way of organization give us many benefits as:

• Application bundle is smaller because all libraries become fully-treeshakable
• Any cyclic dependencies can be catched on library building stage
• The project is structurized better, there are no extra bindings between its entities

This means that you can import even just one entity from our library and be sure that there is no redundant code in your bundle. There is no code duplication or excess dependencies.

Customizable

All styles and colors of our library are built with CSS custom properties. It allows making new custom themes easy and you can change them on the fly.

Now we offer one main theme of Taiga UI but we have plans to create several simple and several unusual themes.

If you want to customize a single component, there are also some methods to do that. In theory, you can redesign our Kit for your design system in a few hours and use it without worrying because we don’t make breaking changes in CSS-variables too to prevent layout bugs. For example, our company is already using a separate proprietary theme on top of the open source code.

Agnostic

We want to make our components so that every developer could adjust it for their specific case fast and easy.

We do not try to envision every use case. Instead, we do not restrict appearance and use generics so components are not limited to a particular data model. You can read more about such concepts in the article by Alex Inkin “Agnostic components in Angular”.

Nevertheless, we take care of basic UX aspects to let you focus on your project features. For example, when the user focuses our textfield with a keyboard, it will show a hint after a second automatically to let the screen reader read it.

Well engineered

We respect the best developer practices and try to follow the Angular way in development of our libraries.

We are not afraid of DI, all our components use OnPush and the whole project is developed with strict TypeScript mode (we are very sensitive about typings). If you want to use SSR one day, our components will work correctly.

You do not need to worry about unexpected values of wrong types from our components or utils. Our components even print asserts in dev mode if you pass incorrect data to them :)

Read more Angular tips & tricks in my twitter: @marsibarsi

It’s big!

We have 130+ components, 100+ directives, dozens of tokens, utils and tools.

Right now you can build almost any idea of your interface quickly. And it isn't over yet: we have some ideas of next components and we are open to your requests.

How to start using Taiga

Visit our official website with documentation. Here you can see a demo of our components, learn about our libraries and find instructions how to add it into your project: taiga-ui.dev

If you want to support us or see our progress, give a star and follow Taiga UI on Github. There you can ask any questions, propose an idea or contribute to our code.

We also have a channel in Angular discord. Feel free to contact us there!

It's not goodbye

We want to write more articles about how we organize and develop our libraries. Such articles can help you understand better how our UI Kit works. They will also explain all our tricks and practices of developing easy reusable components on Angular that are very helpful in application development too.

Tell us your opinion about Taiga UI and share your ideas about which components, tools or processes you want to read first