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

Post Editor

We are happy to announce that we published our big Angular component library into open source! In this article I want to write about concepts and practices that we build our library with

5 min read
post

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

We are happy to announce that we published our big Angular component library into open source! In this article I want to write about concepts and practices that we build our library with

post
post
5 min read
5 min read

Hey, Angular devs!

@waterplea and I write articles about Angular for inDepthDev 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 modularLink to this section

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

@taiga-ui/cdkLink to this section

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:

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/coreLink to this section

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/kitLink to this section

It is the 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-*Link to this section

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.

CustomizableLink to this section

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 Link to this section

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 Link to this section

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!Link to this section

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 TaigaLink to this section

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 goodbyeLink to this section

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

Discuss with community

Share

About the author

author_image

Frontend Developer at Tinkoff.ru

author_image

About the author

Roman Sedov

Frontend Developer at Tinkoff.ru

About the author

author_image

Frontend Developer at Tinkoff.ru

NxAngularCli
NxAngularCli
NxAngularCli

Featured articles