Taiga UI

# Taiga UI — Angular Components Library

> Enterprise‑grade Angular UI components with 100+ building blocks, charts, and utilities.
> For AI assistants helping developers implement Taiga UI in Angular apps.

## For Human Visitors

- Main docs: https://taiga-ui.dev
- GitHub: https://github.com/taiga-family/taiga-ui
- Issues: https://github.com/taiga-family/taiga-ui/issues

<!-- AUTO-GENERATED BELOW -->


### Documentation

- [Ai Support](https://taiga-ui.dev/ai-support)
- [Appearances](https://taiga-ui.dev/appearances)
- [Breakpoints](https://taiga-ui.dev/breakpoints)
- [Browser Support](https://taiga-ui.dev/browser-support)
- [Colors](https://taiga-ui.dev/colors)
- [Getting Started](https://taiga-ui.dev/getting-started)
- [I18n](https://taiga-ui.dev/i18n)
- [Lists](https://taiga-ui.dev/lists)
- [Migration Guide](https://taiga-ui.dev/migration-guide)
- [Mobile Themes](https://taiga-ui.dev/mobile-themes)
- [Portals](https://taiga-ui.dev/portals)
- [Related](https://taiga-ui.dev/related)
- [Rtl](https://taiga-ui.dev/rtl)
- [Shadows](https://taiga-ui.dev/shadows)
- [Spaces](https://taiga-ui.dev/spaces)
- [Ssr](https://taiga-ui.dev/ssr)
- [Stackblitz](https://taiga-ui.dev/stackblitz)
- [Typography](https://taiga-ui.dev/typography)
- [Variables](https://taiga-ui.dev/variables)
- [Viewport](https://taiga-ui.dev/viewport)
- [Wrapper](https://taiga-ui.dev/wrapper)

### Charts

- [Arc Chart](https://taiga-ui.dev/charts/arc-chart)
- [Axes](https://taiga-ui.dev/charts/axes)
- [Bar](https://taiga-ui.dev/charts/bar)
- [Bar Chart](https://taiga-ui.dev/charts/bar-chart)
- [Bar Set](https://taiga-ui.dev/charts/bar-set)
- [Legend Item](https://taiga-ui.dev/charts/legend-item)
- [Line Chart](https://taiga-ui.dev/charts/line-chart)
- [Line Days Chart](https://taiga-ui.dev/charts/line-days-chart)
- [Pie Chart](https://taiga-ui.dev/charts/pie-chart)
- [Ring Chart](https://taiga-ui.dev/charts/ring-chart)

### Components

- [Accordion](https://taiga-ui.dev/components/accordion)
- [Actions Bar](https://taiga-ui.dev/components/actions-bar)
- [Alert](https://taiga-ui.dev/components/alert) — Built-in implementation of notifications Position on screen can be configured by providing margins with TUI_ALERT_POSITION token. Default value is 2rem 3rem 0 auto .
- [Avatar](https://taiga-ui.dev/components/avatar)
- [Badge](https://taiga-ui.dev/components/badge) — Component for displaying text, pictures and icons.
- [Badge Notification](https://taiga-ui.dev/components/badge-notification) — Simple non-interactive badge. Used in headers, cells, cards, avatars to indicate notifications, such as new messages
- [Badged Content](https://taiga-ui.dev/components/badged-content) — BadgedContent is a wrapper for other components to add badges and notifications to them.
- [Block](https://taiga-ui.dev/components/block) — Block is a special presentation of a checkbox/radiobutton which can display actual control or be a control itself
- [Bottom Sheet](https://taiga-ui.dev/components/bottom-sheet) — A non-modal draggable sheet
- [Button](https://taiga-ui.dev/components/button)
- [Button Close](https://taiga-ui.dev/components/button-close)
- [Button Group](https://taiga-ui.dev/components/button-group)
- [Calendar](https://taiga-ui.dev/components/calendar) — A simple calendar. If you want a textfield with date, see InputDate and InputDateRange
- [Calendar Month](https://taiga-ui.dev/components/calendar-month) — Month picker component. If you want a textfield, see InputMonth
- [Calendar Range](https://taiga-ui.dev/components/calendar-range) — Component for choosing date range in calendar
- [Carousel](https://taiga-ui.dev/components/carousel) — Carousel allows you to rotate through arbitrary items. Multiple items can be shown simultaneously.
- [Checkbox](https://taiga-ui.dev/components/checkbox) — A checkbox component that is able to imitate native control on mobile platforms. Use --tui-background-accent-2 CSS variable to customize color of native control emulation
- [Chip](https://taiga-ui.dev/components/chip) — Chip component is used to display array data and can also be interactive depending on the tag used.
- [Combo Box](https://taiga-ui.dev/components/combo-box) — ComboBox is a form control for selecting a single value from a set of options. It is similar to Select but with a major difference – possibility to enter value manually .
- [Comment](https://taiga-ui.dev/components/comment)
- [Compass](https://taiga-ui.dev/components/compass)
- [Confirm](https://taiga-ui.dev/components/confirm) — Confirm is a ready to use Dialog to ask user to confirm an action See this example to learn how to use confirm to prevent data loss on forms inside other modals
- [Copy](https://taiga-ui.dev/components/copy) — This component provides an easy way to copy text content to the clipboard. It displays the content normally and shows a copy button on hover, with visual feedback when content is copied.
- [Data List](https://taiga-ui.dev/components/data-list) — DataList allows to make lists or menus
- [Data List Wrapper](https://taiga-ui.dev/components/data-list-wrapper) — DataListWrapper is an abstraction over DataList to simplify usage in common cases where precise control is not necessary.
- [Dialog](https://taiga-ui.dev/components/dialog) — Built-in implementation of Taiga UI modals If you want custom dialogs see this link on creating your own implementation Use TUI_DIALOGS_CLOSE token if you need to close dialog with from a stream. For example, this way you can close dialogs by logout
- [Drawer](https://taiga-ui.dev/components/drawer)
- [Elastic Container](https://taiga-ui.dev/components/elastic-container) — A wrapper component that changes its height with transition, depending on the content
- [Error](https://taiga-ui.dev/components/error) — Error allows to show an error. If you work with a form, see tuiFieldError . The idea of tui-error is to show arbitrary messages styled as errors, with height or fade transition.
- [Expand](https://taiga-ui.dev/components/expand)
- [Filter](https://taiga-ui.dev/components/filter) — Components shows separated items that can be used to filter content on the page. There are also an option with badges.
- [Floating Container](https://taiga-ui.dev/components/floating-container) — FloatingContainer is a special container for creating different animated sticky footers
- [Group](https://taiga-ui.dev/components/group) — A directive for grouping other components. For example, textfields and buttons .
- [Icon](https://taiga-ui.dev/components/icon) — A component to use icons and color them with CSS. By default, tui-icon expects the Lucide icons. To associate a name with icon you should use that pattern &#64;tui.[name]
- [Input](https://taiga-ui.dev/components/input) — This version of the component is deprecated and will be removed in the next major version. Use Textfield instead! Input&nbsp;&mdash; is a single-line textfield. It's not recommended to use it with numbers, because the value type of this component is a string Inputs for other types of data: Textarea — for multiline text InputDate — for dates InputDateRange — for a range of dates InputNumber — for number (with measurement postfix) InputPhone — for phone numbers InputTag — for input tags InputRange , InputSlider — for accurate number values Slider , Range — for not accurate number values
- [Input Card](https://taiga-ui.dev/components/input-card) — InputCard can be used with InputExpire and InputCVC to input a card. Use tuiCreateLuhnValidator(message) to create a Validator that uses Luhn algorithm
- [Input Card Group](https://taiga-ui.dev/components/input-card-group) — InputCardGroup is used to input a card as a separated control
- [Input Chip](https://taiga-ui.dev/components/input-chip) — InputChip uses specifically modified Textfield to represent array of selectable items.
- [Input Color](https://taiga-ui.dev/components/input-color) — InputColor = Textfield + type="color" + Maskito + ❤️
- [Input Date](https://taiga-ui.dev/components/input-date) — InputDate = Textfield + Calendar + ❤️
- [Input Date Multi](https://taiga-ui.dev/components/input-date-multi) — InputDateMulti uses specifically modified Textfield to represent array of dates.
- [Input Date Range](https://taiga-ui.dev/components/input-date-range) — InputDateRange = Textfield + CalendarRange + ❤️
- [Input Date Time](https://taiga-ui.dev/components/input-date-time) — InputDateTime = Textfield + Calendar + ❤️
- [Input Files](https://taiga-ui.dev/components/input-files) — An input for uploading one or several files using native input file capabilities
- [Input Inline](https://taiga-ui.dev/components/input-inline) — Inline input field
- [Input Month](https://taiga-ui.dev/components/input-month) — InputMonth = Textfield + CalendarMonth + ❤️
- [Input Number](https://taiga-ui.dev/components/input-number) — InputNumber is a form field to provide numerical input.