tdesign-miniprogram

The saved excerpt is a snapshot from when this skill was listed. The external source remains the complete and most current version.

# TDesign Mini Program

TDesign小程序组件库。

---
name: tdesign-miniprogram
description: "TDesign WeChat Mini Program UI component library by Tencent. Use when building WeChat mini apps with TDesign components (Button, Dialog, Input, Tabs, Chat, etc.), implementing TDesign design system, customizing themes/dark mode, or building AI chat interfaces in mini programs."
description_zh: "TDesign 微信小程序组件库（60+ 组件、主题定制、AI 聊天）"
description_en: "TDesign WeChat Mini Program UI components, themes & AI chat"
version: 1.0.0
homepage: https://tdesign.tencent.com/miniprogram/overview
allowed-tools: Read,Write,Bash
---

# TDesign Mini Program Skill

TDesign WeChat Mini Program component library, an enterprise-level design system by Tencent. Provides 60+ high-quality components with dark mode support, theme customization, and more.

## When to Use This Skill

This skill should be triggered when:

- Developing WeChat Mini Programs with TDesign component library
- Using TDesign UI components (Button, Input, Dialog, etc.)
- Implementing interfaces following TDesign design specifications
- Configuring TDesign themes and style customization
- Building AI chat interfaces (using TDesign Chat components)
- Implementing dark mode adaptation

## Quick Start

### Installation

```bash
npm i tdesign-miniprogram -S --production
```

### Modify app.json

Remove `"style": "v2"` from `app.json` to avoid style conflicts.

### Modify project.config.json

Add the following to the `setting` section of `project.config.json`:

```json
{
  "setting": {
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]
  }
}
```

### Modify tsconfig.json (TypeScript projects)

```json
{
  "paths": {
    "tdesign-miniprogram/*": [
      "./miniprogram/miniprogram_npm/tdesign-miniprogram/*"
    ]
  }
}
```

> After modifying project.config.json, build npm in WeChat DevTools: `Tools - Build npm`

> After successful build, check `Compile JS to ES5`

### Using Components

Import in page or component JSON file:

```json
{
  "usingComponents": {
    "t-button": "tdesign-miniprogram/button/button"
  }
}
```

Use in WXML:

```html
<t-button theme="primary">Button</t-button>
```

## Component Categories

### Basic Components (6)

| Component | Description            | Import Path                           |
| --------- | ---------------------- | ------------------------------------- |
| Button    | Button                 | `tdesign-miniprogram/button/button`   |
| Divider   | Divider                | `tdesign-miniprogram/divider/divider` |
| Fab       | Floating Action Button | `tdesign-miniprogram/fab/fab`         |
| Icon      | Icon                   | `tdesign-miniprogram/icon/icon`       |
| Layout    | Layout                 | `tdesign-miniprogram/row/row`         |
| Link      | Link                   | `tdesign-miniprogram/link/link`       |

### Navigation Components (8)

| Component | Description     | Import Path                             |
| --------- | --------------- | --------------------------------------- |
| BackTop   | Back to Top     | `tdesign-miniprogram/back-top/back-top` |
| Drawer    | Drawer          | `tdesign-miniprogram/drawer/drawer`     |
| Indexes   | Index List      | `tdesign-miniprogram/indexes/indexes`   |
| Navbar    | Navigation Bar  | `tdesign-miniprogram/navbar/navbar`     |
| SideBar   | Side Navigation | `tdesign-miniprogram/side-bar/side-bar` |
| Steps     | Steps           | `tdesign-miniprogram/steps/steps`       |
| TabBar    | Bottom Tab Bar  | `tdesign-miniprogram/tab-bar/tab-bar`   |
| Tabs      | Tabs            | `tdesign-miniprogram/tabs/tabs`         |

### Input Components (16)

| Component      | Description      | Import Path                                             |
| -------------- | ---------------- | ------------------------------------------------------- |
| Calendar       | Calendar         | `tdesign-miniprogram/calendar/