Back to Details

taiga-ui-setup

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Taiga UI setup

Taiga UI 配置

1. Check if installed

1. 检查是否已安装

bash
grep '@taiga-ui/' package.json
Packages present → skip to step 3. Nothing found → step 2.
bash
grep '@taiga-ui/' package.json
找到相关包 → 跳转到步骤 3。未找到任何内容 → 执行步骤 2。

2. Install

2. 安装

bash
npx ng add taiga-ui --defaults --skip-confirmation
This is the only supported install path — do not add 
@taiga-ui/*
packages to 
package.json
by hand. The schematic asks which packages to add (
core
, 
kit
, 
icons
, 
layout
, addons); pick what the task needs, 
core
+ 
kit
is the usual answer. It also wires up styles, providers and imports itself.
bash
npx ng add taiga-ui --defaults --skip-confirmation
这是唯一受支持的安装方式——不要手动将 
@taiga-ui/*
包添加到 
package.json
。schematic 会询问需要添加哪些包（
core
、 
kit
、
icons
、
layout
、addons）；根据任务需求选择，通常选择 
core
+ 
kit
。 它还会自动配置样式、providers 和 imports。

3. Verify the wiring

3. 验证配置

The schematic normally does all of this; check it and fix only what is missing.
  • Styles — 
    angular.json
    → 
    architect.build.options.styles
    contains 
    @taiga-ui/core/styles/taiga-ui-theme.less
    and 
    @taiga-ui/core/styles/taiga-ui-fonts.less
  • Providers — 
    provideTaiga()
    is in the application providers:
    ts
    import {provideTaiga} from '@taiga-ui/core';
// ...

bootstrapApplication(App, {
  providers: [
    provideTaiga(),
    // ...
  ],
}).catch(console.error);
    In the default CLI layout the providers array lives in 
    app.config.ts
    .
  • Root wrapper — the root template (
    app.html
    ) wraps everything in 
    <tui-root>...</tui-root>
    , and the root component imports 
    TuiRoot
    from 
    @taiga-ui/core
    . Without it portals, dialogs, hints and alerts do not work.
schematic 通常会完成所有这些配置；进行检查，并且只修复缺失的部分。
  • 样式——
    angular.json
    → 
    architect.build.options.styles
    包含 
    @taiga-ui/core/styles/taiga-ui-theme.less
    和 
    @taiga-ui/core/styles/taiga-ui-fonts.less
  • Providers——应用的 providers 中包含 
    provideTaiga()
    ：
    ts
    import {provideTaiga} from '@taiga-ui/core';
// ...

bootstrapApplication(App, {
  providers: [
    provideTaiga(),
    // ...
  ],
}).catch(console.error);
    在默认 CLI 项目结构中，providers 数组位于 
    app.config.ts
    中。
  • Root wrapper——根模板（
    app.html
    ）使用 
    <tui-root>...</tui-root>
    包裹所有内容，并且根组件从 
    @taiga-ui/core
    导入 
    TuiRoot
    。缺少它时，portals、dialogs、hints 和 alerts 将无法正常工作。

4. Confirm

4. 确认

bash
npx ng build
bash
npx ng build

5. MCP (if the client is supported)

5. MCP（如果客户端支持）

bash
npx @taiga-ui/mcp init --client claude    # writes .mcp.json
npx @taiga-ui/mcp init --client cursor    # writes .cursor/mcp.json
npx @taiga-ui/mcp init --client vscode    # writes .vscode/mcp.json
npx @taiga-ui/mcp init --client windsurf  # writes ~/.codeium/windsurf/mcp_config.json (global only)
npx @taiga-ui/mcp init --client opencode  # writes opencode.json
npx @taiga-ui/mcp init --client codex     # writes .codex/config.toml
Build passes → setup is done.
bash
npx @taiga-ui/mcp init --client claude    # writes .mcp.json
npx @taiga-ui/mcp init --client cursor    # writes .cursor/mcp.json
npx @taiga-ui/mcp init --client vscode    # writes .vscode/mcp.json
npx @taiga-ui/mcp init --client windsurf  # writes ~/.codeium/windsurf/mcp_config.json (global only)
npx @taiga-ui/mcp init --client opencode  # writes opencode.json
npx @taiga-ui/mcp init --client codex     # writes .codex/config.toml
构建通过 → 配置完成。