[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-10857":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":18,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":24,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":42,"readmeContent":43,"aiSummary":44,"trendingCount":16,"starSnapshotCount":16,"syncStatus":45,"lastSyncTime":46,"discoverSource":47},10857,"taiga-ui","taiga-family\u002Ftaiga-ui","taiga-family","Angular components library for awesome people","https:\u002F\u002Ftaiga-ui.dev",null,"TypeScript",3993,562,56,143,0,1,9,20,30.25,"Apache License 2.0",false,"main",true,[26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41],"angular","best-practices","cdk","component-library","components","design-patterns","figma","hacktoberfest","mobile","resposive-design","typescript","ui","ui-components","ui-design","uikit","web","2026-06-12 02:02:27","\u003Cdiv align=\"center\">\n\n# \u003Cimg src=\"projects\u002Fdemo\u002Fsrc\u002Fassets\u002Fimages\u002Ftaiga.svg\" alt=\"taiga ui logo\" width=\"36px\"> Taiga UI\n\n[![npm version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@taiga-ui\u002Fcdk.svg)](https:\u002F\u002Fnpmjs.com\u002Fpackage\u002F@taiga-ui\u002Fcdk)\n[![codecov](https:\u002F\u002Fcodecov.io\u002Fgh\u002Ftaiga-family\u002Ftaiga-ui\u002Fbranch\u002Fmain\u002Fgraphs\u002Fbadge.svg)](https:\u002F\u002Fapp.codecov.io\u002Fgh\u002Ftaiga-family\u002Ftaiga-ui\u002Ftree\u002Fmain\u002Fprojects)\n[![All packages CI](https:\u002F\u002Fgithub.com\u002Ftaiga-family\u002Ftaiga-ui\u002Factions\u002Fworkflows\u002Fbuild.yml\u002Fbadge.svg?branch=main)](https:\u002F\u002Fgithub.com\u002Ftaiga-family\u002Ftaiga-ui\u002Factions\u002Fworkflows\u002Fbuild.yml)\n[![Deploy](https:\u002F\u002Fgithub.com\u002Ftaiga-family\u002Ftaiga-ui\u002Factions\u002Fworkflows\u002Fdeploy-gh-pages.yml\u002Fbadge.svg?branch=main)](https:\u002F\u002Fgithub.com\u002Ftaiga-family\u002Ftaiga-ui\u002Factions\u002Fworkflows\u002Fdeploy-gh-pages.yml)\n[![Downloads per month](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@taiga-ui\u002Fcdk?color=dark-green)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@taiga-ui\u002Fcdk)\n[![Discord](https:\u002F\u002Fimg.shields.io\u002Fdiscord\u002F748677963142135818?color=7289DA&label=%23taiga-ui&logo=discord&logoColor=white)](https:\u002F\u002Fdiscord.gg\u002FUs8d8JVaTg)\n[![Renovate](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Frenovate-configured-green?logo=renovatebot)](https:\u002F\u002Fdocs.renovatebot.com\u002F)\n[![Visitors](https:\u002F\u002Fapi.visitorbadge.io\u002Fapi\u002Fvisitors?path=https%3A%2F%2Fgithub.com%2Ftaiga-family%2Ftaiga-ui&label=Visitors&countColor=%232ccce4&style=plastic&labelStyle=lower)](https:\u002F\u002Fvisitorbadge.io\u002Fstatus?path=https%3A%2F%2Fgithub.com%2Ftaiga-family%2Ftaiga-ui)\n![GitHub commit activity (branch)](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fcommit-activity\u002Fy\u002Ftaiga-family\u002Ftaiga-ui)\n[![Code style: prettier](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fcode_style-prettier-ff69b4.svg)](https:\u002F\u002Fgithub.com\u002Fprettier\u002Fprettier)\n[![License](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-Apache_2.0-blue.svg)](https:\u002F\u002Fopensource.org\u002Flicenses\u002FApache-2.0)\n\n[Website](https:\u002F\u002Ftaiga-ui.dev) • [Documentation](https:\u002F\u002Ftaiga-ui.dev\u002Fgetting-started) • [Core team](#core-team)\n\n\u003C\u002Fdiv>\n\n**Taiga UI** is fully-treeshakable Angular UI Kit consisting of multiple base libraries and several add-ons.\n\nIt is based on [ng-polymorpheus](https:\u002F\u002Fgithub.com\u002Ftaiga-family\u002Fng-polymorpheus) dynamic content approach and uses\n[Web APIs for Angular](https:\u002F\u002Fgithub.com\u002Fng-web-apis) for required browser APIs.\n\n## Why Taiga UI\n\n🧩 **Modular and fully-treeshakable.** We harnessed the power of Secondary Entry Points mechanism. You can import even\njust one entity from our library and be sure that there is no redundant code in your bundle\n\n🧙 **Agnostic**. Our components are very flexible and are ready for any use case. But we take care of basic UX aspects\nto let you focus on your project features\n\n🦋 **Customizable**. We use CSS custom properties for all our styling and provide easy methods to customize all UI\ncomponents with dark theme out of the box\n\n🛠 **Well engineered**. We are not afraid to use DI to the max. All our components use `OnPush`, and the whole project\nis developed with `strict` TypeScript mode\n\n📦 **It's big!** We have 130+ components, 100+ directives, dozens of tokens, utils and tools. And it isn't over yet 🚀\n\n🏗 **Maintained!** The library started as an internal product in our company. It is used by 50+ projects in production\nnow, and it is here to stay.\n\nRead more about Taiga UI main features in\n[this article](https:\u002F\u002Fangular.love\u002Ftaiga-ui-is-a-new-angular-ui-kit-that-you-should-try) on angular.love\n\n## Version compatibility\n\n| Taiga UI | Angular              | Supported              | Latest version                                                                                     |\n| -------- | -------------------- | ---------------------- | -------------------------------------------------------------------------------------------------- |\n| `5.x.y`  | `^19.0.0` - `latest` | ✅ Current             | ![npm version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@taiga-ui\u002Fcdk\u002Flatest?label=%40taiga-ui%2Fcdk%20~%20v5) |\n| `4.x.y`  | `^16.0.0` - `latest` | ✅ Long-Term Support   | ![npm version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@taiga-ui\u002Fcdk\u002Fv4-lts?label=%40taiga-ui%2Fcdk%20~%20v4) |\n| `3.x.y`  | `^12.0.0` - `latest` | ⚠️ No longer supported | ![npm version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@taiga-ui\u002Fcdk\u002Fv3-lts?label=%40taiga-ui%2Fcdk%20~%20v3) |\n| `2.x.y`  | `^9.0.0` - `^15.0.0` | ⚠️ No longer supported | ![npm version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@taiga-ui\u002Fcdk\u002Fv2-lts?label=%40taiga-ui%2Fcdk%20~%20v2) |\n\n## Versions In This Repository\n\n- [main](https:\u002F\u002Fgithub.com\u002Ftaiga-family\u002Ftaiga-ui\u002Fcommits\u002Fmain) - This is all of the current work, which is against v5\n- Previous major versions – [2.x](https:\u002F\u002Fgithub.com\u002Ftaiga-family\u002Ftaiga-ui\u002Ftree\u002Fv2.x),\n  [3.x](https:\u002F\u002Fgithub.com\u002Ftaiga-family\u002Ftaiga-ui\u002Ftree\u002Fv3.x), [4.x](https:\u002F\u002Fgithub.com\u002Ftaiga-family\u002Ftaiga-ui\u002Ftree\u002Fv4.x)\n  and etc.\n\n## How to start\n\nSee our [Getting started](https:\u002F\u002Ftaiga-ui.dev\u002Fgetting-started) page to start working with Taiga UI\n\nYou can also use our [StackBlitz starter](https:\u002F\u002Ftaiga-ui.dev\u002Fstackblitz) to create a quick sample with Taiga UI\n\n🎨 Figma available only for 2.x and 3.x versions [here](https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Ffile\u002F1220308188005380608). Next\nversion of Figma library is in progress for the latest version of Taiga UI.\n\n## Community\n\n💡 Your ideas are very welcome in GitHub issues or discussions\n\n🗨 For English live chat join [#taiga-ui](https:\u002F\u002Fdiscord.gg\u002FzrB2EdJjEy) channel in official Angular discord\n\n💬 For Russian live chat join [taiga_ui](https:\u002F\u002Ft.me\u002Ftaiga_ui) Telegram group\n\n## Core team\n\n\u003Ctable>\n    \u003Ctr>\n       \u003Ctd align=\"center\">\n            \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fwaterplea\"\n                >\u003Cimg\n                    src=\"https:\u002F\u002Fgithub.com\u002Fwaterplea.png?size=200\"\n                    width=\"100\"\n                    style=\"margin-bottom: -4px; border-radius: 8px;\"\n                    alt=\"Alex Inkin\"\n                \u002F>\u003Cbr \u002F>\u003Cb>     Alex Inkin     \u003C\u002Fb>\u003C\u002Fa\n            >\n            \u003Cdiv style=\"margin-top: 4px\">\n                \u003Ca\n                    href=\"https:\u002F\u002Ftwitter.com\u002Fwaterplea\"\n                    title=\"Twitter\"\n                    >\u003Cimg\n                        width=\"16\"\n                        src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FMarsiBarsi\u002Freadme-icons\u002Fmain\u002Ftwitter.svg\"\n                \u002F>\u003C\u002Fa>\n                \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fwaterplea\" title=\"Github\"\n                    >\u003Cimg\n                        width=\"16\"\n                        src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FMarsiBarsi\u002Freadme-icons\u002Fmain\u002Fgithub.svg\"\n                \u002F>\u003C\u002Fa>\n                \u003Ca\n                    href=\"https:\u002F\u002Ft.me\u002Fwaterplea\"\n                    title=\"Telegram\"\n                    >\u003Cimg\n                        width=\"16\"\n                        src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FMarsiBarsi\u002Freadme-icons\u002Fmain\u002Fsend.svg\"\n                \u002F>\u003C\u002Fa>\n            \u003C\u002Fdiv>\n        \u003C\u002Ftd>\n        \u003Ctd align=\"center\">\n            \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fmarsibarsi\"\n                >\u003Cimg\n                    src=\"https:\u002F\u002Fgithub.com\u002Fmarsibarsi.png?size=200\"\n                    width=\"100\"\n                    style=\"margin-bottom: -4px; border-radius: 8px;\"\n                    alt=\"Roman Sedov\"\n                \u002F>\u003Cbr \u002F>\u003Cb> Roman Sedov \u003C\u002Fb>\u003C\u002Fa\n            >\n            \u003Cdiv style=\"margin-top: 4px\">\n                \u003Ca\n                    href=\"https:\u002F\u002Ftwitter.com\u002Fmarsibarsi\"\n                    title=\"Twitter\"\n                    >\u003Cimg\n                        width=\"16\"\n                        src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FMarsiBarsi\u002Freadme-icons\u002Fmain\u002Ftwitter.svg\"\n                \u002F>\u003C\u002Fa>\n                \u003Ca\n                    href=\"https:\u002F\u002Fgithub.com\u002Fmarsibarsi\"\n                    title=\"GitHub\"\n                    >\u003Cimg\n                        width=\"16\"\n                        src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FMarsiBarsi\u002Freadme-icons\u002Fmain\u002Fgithub.svg\"\n                \u002F>\u003C\u002Fa>\n                \u003Ca\n                    href=\"https:\u002F\u002Ft.me\u002Fmarsibarsi\"\n                    title=\"Telegram\"\n                    >\u003Cimg\n                        width=\"16\"\n                        src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FMarsiBarsi\u002Freadme-icons\u002Fmain\u002Fsend.svg\"\n                \u002F>\u003C\u002Fa>\n            \u003C\u002Fdiv>\n        \u003C\u002Ftd>\n        \u003Ctd align=\"center\">\n            \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvladimirpotekhin\"\n                >\u003Cimg\n                    src=\"https:\u002F\u002Fgithub.com\u002Fvladimirpotekhin.png?size=200\"\n                    width=\"100\"\n                    style=\"margin-bottom: -4px; border-radius: 8px;\"\n                    alt=\"Vladimir Potekhin\"\n                \u002F>\u003Cbr \u002F>\u003Cb>Vladimir Potekhin\u003C\u002Fb>\u003C\u002Fa\n            >\n            \u003Cdiv style=\"margin-top: 4px\">\n                \u003Ca\n                    href=\"https:\u002F\u002Ftwitter.com\u002Fv_potekhin\"\n                    title=\"Twitter\"\n                    >\u003Cimg\n                        width=\"16\"\n                        src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FMarsiBarsi\u002Freadme-icons\u002Fmain\u002Ftwitter.svg\"\n                \u002F>\u003C\u002Fa>\n                \u003Ca\n                    href=\"https:\u002F\u002Fgithub.com\u002Fvladimirpotekhin\"\n                    title=\"GitHub\"\n                    >\u003Cimg\n                        width=\"16\"\n                        src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FMarsiBarsi\u002Freadme-icons\u002Fmain\u002Fgithub.svg\"\n                \u002F>\u003C\u002Fa>\n                \u003Ca\n                    href=\"https:\u002F\u002Ft.me\u002Fv_potekhin\"\n                    title=\"Telegram\"\n                    >\u003Cimg\n                        width=\"16\"\n                        src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FMarsiBarsi\u002Freadme-icons\u002Fmain\u002Fsend.svg\"\n                \u002F>\u003C\u002Fa>\n            \u003C\u002Fdiv>\n        \u003C\u002Ftd>\n        \u003Ctd align=\"center\">\n            \u003Ca href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fnsbarsukov\u002F\"\n                >\u003Cimg\n                    src=\"https:\u002F\u002Fgithub.com\u002Fnsbarsukov.png?size=200\"\n                    width=\"100\"\n                    style=\"margin-bottom: -4px; border-radius: 8px;\"\n                    alt=\"Nikita Barsukov\"\n                \u002F>\u003Cbr \u002F>\u003Cb>Nikita Barsukov\u003C\u002Fb>\u003C\u002Fa\n            >\n            \u003Cdiv style=\"margin-top: 4px\">\n                \u003Ca\n                    href=\"https:\u002F\u002Ftwitter.com\u002Fnsbarsukov\"\n                    title=\"Twitter\"\n                    >\u003Cimg\n                        width=\"16\"\n                        src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FMarsiBarsi\u002Freadme-icons\u002Fmain\u002Ftwitter.svg\"\n                \u002F>\u003C\u002Fa>\n                \u003Ca\n                    href=\"https:\u002F\u002Fgithub.com\u002Fnsbarsukov\"\n                    title=\"GitHub\"\n                    >\u003Cimg\n                        width=\"16\"\n                        src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FMarsiBarsi\u002Freadme-icons\u002Fmain\u002Fgithub.svg\"\n                \u002F>\u003C\u002Fa>\n                \u003Ca\n                    href=\"https:\u002F\u002Ft.me\u002Fnsbarsukov\"\n                    title=\"Telegram\"\n                    >\u003Cimg\n                        width=\"16\"\n                        src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FMarsiBarsi\u002Freadme-icons\u002Fmain\u002Fsend.svg\"\n                \u002F>\u003C\u002Fa>\n            \u003C\u002Fdiv>\n        \u003C\u002Ftd> \n        \u003Ctd align=\"center\">\n            \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fsplincode\"\n                >\u003Cimg\n                    src=\"https:\u002F\u002Fgithub.com\u002Fsplincode.png?size=200\"\n                    width=\"100\"\n                    style=\"margin-bottom: -4px; border-radius: 8px;\"\n                    alt=\"Maksim Ivanov\"\n                \u002F>\u003Cbr \u002F>\u003Cb>Maksim Ivanov\u003C\u002Fb>\u003C\u002Fa\n            >\n            \u003Cdiv style=\"margin-top: 4px\">\n                \u003Ca\n                    href=\"https:\u002F\u002Ftwitter.com\u002Fsplincodewd\"\n                    title=\"Twitter\"\n                    >\u003Cimg\n                        width=\"16\"\n                        src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FMarsiBarsi\u002Freadme-icons\u002Fmain\u002Ftwitter.svg\"\n                \u002F>\u003C\u002Fa>\n                \u003Ca\n                    href=\"https:\u002F\u002Fgithub.com\u002Fsplincode\"\n                    title=\"GitHub\"\n                    >\u003Cimg\n                        width=\"16\"\n                        src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FMarsiBarsi\u002Freadme-icons\u002Fmain\u002Fgithub.svg\"\n                \u002F>\u003C\u002Fa>\n                \u003Ca\n                    href=\"https:\u002F\u002Ft.me\u002Fsplincode\"\n                    title=\"Telegram\"\n                    >\u003Cimg\n                        width=\"16\"\n                        src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FMarsiBarsi\u002Freadme-icons\u002Fmain\u002Fsend.svg\"\n                \u002F>\u003C\u002Fa>\n            \u003C\u002Fdiv>\n        \u003C\u002Ftd>\n        \u003Ctd align=\"center\">\n            \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fmdlufy\"\n                >\u003Cimg\n                    src=\"https:\u002F\u002Fgithub.com\u002Fmdlufy.png?size=200\"\n                    width=\"100\"\n                    style=\"margin-bottom: -4px; border-radius: 8px;\"\n                    alt=\"German Panov\"\n                \u002F>\u003Cbr \u002F>\u003Cb>German Panov\u003C\u002Fb>\u003C\u002Fa\n            >\n            \u003Cdiv style=\"margin-top: 4px\">\n                \u003Ca\n                    href=\"https:\u002F\u002Ftwitter.com\u002Fmdlufy_\"\n                    title=\"Twitter\"\n                    >\u003Cimg\n                        width=\"16\"\n                        src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FMarsiBarsi\u002Freadme-icons\u002Fmain\u002Ftwitter.svg\"\n                \u002F>\u003C\u002Fa>\n                \u003Ca\n                    href=\"https:\u002F\u002Fgithub.com\u002Fmdlufy\"\n                    title=\"GitHub\"\n                    >\u003Cimg\n                        width=\"16\"\n                        src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FMarsiBarsi\u002Freadme-icons\u002Fmain\u002Fgithub.svg\"\n                \u002F>\u003C\u002Fa>\n                \u003Ca\n                    href=\"https:\u002F\u002Ft.me\u002Fmdlufy\"\n                    title=\"Telegram\"\n                    >\u003Cimg\n                        width=\"16\"\n                        src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FMarsiBarsi\u002Freadme-icons\u002Fmain\u002Fsend.svg\"\n                \u002F>\u003C\u002Fa>\n            \u003C\u002Fdiv>\n        \u003C\u002Ftd>\n    \u003C\u002Ftr>\n\u003C\u002Ftable>\n\n## Contributors\n\nSee our [CONTRIBUTING.md](\u002FCONTRIBUTING.md) guide. Try to [make pull request](https:\u002F\u002Fgithub.dev\u002Ftaiga-family\u002Ftaiga-ui)\nonline from Web IDE.\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Ftaiga-family\u002Ftaiga-ui\u002Fgraphs\u002Fcontributors\">\n  \u003Cimg src=\"https:\u002F\u002Fcontrib.rocks\u002Fimage?repo=taiga-family\u002Ftaiga-ui\" \u002F>\n\u003C\u002Fa>\n\n## Stars 🌟\n\n[![Popular](https:\u002F\u002Fstarchart.cc\u002Ftaiga-family\u002Ftaiga-ui.svg?variant=adaptive)](https:\u002F\u002Fstarchart.cc\u002Ftaiga-family\u002Ftaiga-ui)\n\n## License\n\n🆓 Feel free to use our library in your commercial and private applications\n\nAll Taiga UI packages are covered by [Apache 2.0](\u002FLICENSE)\n\nRead more about this license [here](https:\u002F\u002Fchoosealicense.com\u002Flicenses\u002Fapache-2.0\u002F)\n","Taiga UI 是一个专为 Angular 开发的UI组件库。它基于ng-polymorpheus动态内容方法，并利用Web APIs for Angular来处理浏览器API需求，提供超过130个组件和100多个指令，支持模块化和全树摇优化，确保只有实际使用的代码被包含在最终构建中。此外，该库具有高度可定制性，使用CSS自定义属性进行样式调整，并内置了暗黑模式。其组件设计灵活且考虑了基本的用户体验方面，同时整个项目采用严格模式的TypeScript开发，充分利用依赖注入（DI）机制并使所有组件运行于`OnPush`变更检测策略下。Taiga UI非常适合需要丰富UI组件、注重性能与可维护性的Angular应用开发场景。",2,"2026-06-11 03:30:29","top_topic"]