Taiga UI

Taiga UI is a fully-treeshakable Angular UI Kit composed of multiple base libraries and various add-ons. It is designed to be modular, agnostic, and highly customizable.

Key Features

• Modular & Treeshakable: Uses Secondary Entry Points to ensure that importing a single entity does not include redundant code in your bundle.
• Agnostic Design: Components are flexible for various use cases while maintaining high-quality UX standards.
• Customizable Styling: Uses CSS custom properties for styling and provides built-in support for dark themes.
• High Performance: Built with strict TypeScript mode and all components use OnPush change detection.
• Dynamic Content: Based on the ng-polymorpheus dynamic content approach and utilizes Web APIs for Angular.

Taiga UI relies on specific types for its API and CDK. Avoid using native DOM or JavaScript types where Taiga UI types are expected:

• Event Handlers: Use the specific Taiga UI type emitted by the component's output (e.g., TuiDay, TuiDayRange) instead of the standard DOM Event type. Always check the component's API - Outputs section for the exact type.
• Date/Time Values: Use Taiga UI CDK types such as TuiDay, TuiMonth, or TuiTime instead of native Date objects or plain numbers. These types are imported from @taiga-ui/cdk.

To use the main set of components for building Taiga UI based Angular applications, install the core packages using npm. It is recommended to install @taiga-ui/cdk, @taiga-ui/core, and @taiga-ui/kit together to ensure all necessary base libraries are available.

npm i @taiga-ui/{cdk,core,kit}

To quickly integrate Taiga UI into an existing Angular project, use the ng add command. This will automatically handle the installation of necessary packages and perform the required configuration steps for the UI Kit.

ng add taiga-ui

When defining routes for your documentation pages, you must include a title in the route data object. This title is required for the TUI_DOC_SEE_ALSO feature to work and is automatically used to update the browser tab title via TUI_DOC_TITLE during navigation.

import {Routes} from '@angular/router';

const appRoutes: Routes = [
  {
    path: 'doc-page-1',
    loadComponent: async () => (await import('../doc-page-1')).DocPage,
    data: {
      title: 'Documentation page #1',
    },
  },
];

To use the layout components, you must first install the base Taiga UI packages (@taiga-ui/cdk and @taiga-ui/core) and then install the @taiga-ui/layout package itself.

Taiga UI is designed to be fully tree-shakable. You can import individual entities (components, directives, etc.) to ensure your final bundle only contains the code you actually use, rather than the entire library.

# Install base packages
npm i @taiga-ui/{cdk,core}

# Install layout package
npm i @taiga-ui/layout

To use the experimental components, you must first install the required base packages (@taiga-ui/cdk and @taiga-ui/core) and then install the experimental package itself.

Note that Taiga UI is fully tree-shakable; you can import individual entities to ensure your bundle only contains the code you actually use.

npm i @taiga-ui/{cdk,core}
npm i @taiga-ui/experimental

To use the documentation portal addon, you must first install the core Taiga UI packages (@taiga-ui/cdk, @taiga-ui/core, and @taiga-ui/kit) followed by the addon itself.

npm i @taiga-ui/{cdk,core,kit}
npm i @taiga-ui/addon-doc

To begin using Taiga UI in your project, you can follow the official Getting Started guide or use the StackBlitz starter to quickly create a functional sample project.

Note: Figma design files are currently only available for versions 2.x and 3.x. A library for the latest version is currently in progress.