<img src="projects/demo/src/assets/images/taiga.svg" alt="taiga ui logo" width="36px"> Taiga UI

GitHub commit activity (branch)

Website • Documentation • Core team • Figma

</div>

Taiga UI is fully-treeshakable Angular UI Kit consisting of multiple base libraries and several add-ons.

It is based on ng-polymorpheus dynamic content approach and uses Web APIs for Angular for required browser APIs.

Why Taiga UI

🧩 Modular and fully-treeshakable. We harnessed the power of Secondary Entry Points mechanism. You can import even just one entity from our library and be sure that there is no redundant code in your bundle

🧙 Agnostic. Our components are very flexible and are ready for any use case. But we take care of basic UX aspects to let you focus on your project features

🦋 Customizable. We use CSS custom properties for all our styling and provide easy methods to customize all UI components

🛠 Well engineered. We are not afraid to use DI to the max. All our components use OnPush, and the whole project is developed with strict TypeScript mode

📦 It's big! We have 130+ components, 100+ directives, dozens of tokens, utils and tools. And it isn't over yet 🚀

🏗 Maintained! The library started as an internal product in our company. It is used by 50+ projects in production now, and it is here to stay.

Read more about Taiga UI main features in this article on inDepth

Version compatibility

Taiga UI	Angular	Supported
`4.x.y`	`^16.0.0` - `latest`	✅ Current
`3.x.y`	`^12.0.0` - `latest`	✅ Long-term support (LTS)
`2.x.y`	`^9.0.0` - `^15.0.0`	⚠️ No longer supported

How to start

See our Getting started page to start working with Taiga UI

You can also use our StackBlitz starter to create a quick sample with Taiga UI

🎨 Check out Taiga UI Figma library which you can use to design your app with Taiga UI components.

Community

💡 Your ideas are very welcome in Github issues or discussions

🗨 For English live chat join #taiga-ui channel in official Angular discord

💬 For Russian live chat join taiga_ui Telegram group

Contributing

See our CONTRIBUTING.md guide. Try to make pull request online from Web IDE.

Core team

<table> <tr> <td align="center"> <a href="https://twitter.com/waterplea" ><img src="https://github.com/waterplea.png?size=200" width="100" style="margin-bottom: -4px; border-radius: 8px;" alt="Alex Inkin" /><br /><b>     Alex Inkin     </b></a > <div style="margin-top: 4px"> <a href="https://twitter.com/waterplea" title="Twitter" ><img width="16" src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/twitter.svg" /></a> <a href="https://github.com/waterplea" title="Github" ><img width="16" src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/github.svg" /></a> <a href="https://t.me/waterplea" title="Telegram" ><img width="16" src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/send.svg" /></a> </div> </td> <td align="center"> <a href="https://twitter.com/marsibarsi" ><img src="https://github.com/marsibarsi.png?size=200" width="100" style="margin-bottom: -4px; border-radius: 8px;" alt="Roman Sedov" /><br /><b> Roman Sedov </b></a > <div style="margin-top: 4px"> <a href="https://twitter.com/marsibarsi" title="Twitter" ><img width="16" src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/twitter.svg" /></a> <a href="https://github.com/marsibarsi" title="GitHub" ><img width="16" src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/github.svg" /></a> <a href="https://t.me/marsibarsi" title="Telegram" ><img width="16" src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/send.svg" /></a> </div> </td> <td align="center"> <a href="https://github.com/vladimirpotekhin" ><img src="https://github.com/vladimirpotekhin.png?size=200" width="100" style="margin-bottom: -4px; border-radius: 8px;" alt="Vladimir Potekhin" /><br /><b>Vladimir Potekhin</b></a > <div style="margin-top: 4px"> <a href="https://twitter.com/v_potekhin" title="Twitter" ><img width="16" src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/twitter.svg" /></a> <a href="https://github.com/vladimirpotekhin" title="GitHub" ><img width="16" src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/github.svg" /></a> <a href="https://t.me/v_potekhin" title="Telegram" ><img width="16" src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/send.svg" /></a> </div> </td> <td align="center"> <a href="https://www.linkedin.com/in/nsbarsukov/" ><img src="https://github.com/nsbarsukov.png?size=200" width="100" style="margin-bottom: -4px; border-radius: 8px;" alt="Nikita Barsukov" /><br /><b>Nikita Barsukov</b></a > <div style="margin-top: 4px"> <a href="https://twitter.com/nsbarsukov" title="Twitter" ><img width="16" src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/twitter.svg" /></a> <a href="https://github.com/nsbarsukov" title="GitHub" ><img width="16" src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/github.svg" /></a> <a href="https://t.me/nsbarsukov" title="Telegram" ><img width="16" src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/send.svg" /></a> </div> </td> <td align="center"> <a href="https://github.com/mdlufy" ><img src="https://github.com/mdlufy.png?size=200" width="100" style="margin-bottom: -4px; border-radius: 8px;" alt="German Panov" /><br /><b>German Panov</b></a > <div style="margin-top: 4px"> <a href="https://github.com/mdlufy" title="GitHub" ><img width="16" src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/github.svg" /></a> <a href="https://t.me/mdlufy" title="Telegram" ><img width="16" src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/send.svg" /></a> </div> </td> <td align="center"> <a href="https://github.com/splincode" ><img src="https://github.com/splincode.png?size=200" width="100" style="margin-bottom: -4px; border-radius: 8px;" alt="Maksim Ivanov" /><br /><b>Maksim Ivanov</b></a > <div style="margin-top: 4px"> <a href="https://twitter.com/splincodewd" title="Twitter" ><img width="16" src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/twitter.svg" /></a> <a href="https://github.com/splincode" title="GitHub" ><img width="16" src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/github.svg" /></a> <a href="https://t.me/splincode" title="Telegram" ><img width="16" src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/send.svg" /></a> </div> </td> </tr> </table>