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

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:

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

Modify tsconfig.json (TypeScript projects)

{
  "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:

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

Use in WXML:

<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/calendar`
Cascader	Cascader	`tdesign-miniprogram/cascader/cascader`
CheckBox	Checkbox	`tdesign-miniprogram/checkbox/checkbox`
DateTimePicker	Date Time Picker	`tdesign-miniprogram/date-time-picker/date-time-picker`
Input	Input	`tdesign-miniprogram/input/input`
Picker	Picker	`tdesign-miniprogram/picker/picker`
Radio	Radio	`tdesign-miniprogram/radio/radio`
Rate	Rate	`tdesign-miniprogram/rate/rate`
Search	Search	`tdesign-miniprogram/search/search`
Slider	Slider	`tdesign-miniprogram/slider/slider`
Stepper	Stepper	`tdesign-miniprogram/stepper/stepper`
Switch	Switch	`tdesign-miniprogram/switch/switch`
Textarea	Textarea	`tdesign-miniprogram/textarea/textarea`
TreeSelect	Tree Select	`tdesign-miniprogram/tree-select/tree-select`
Upload	Upload	`tdesign-miniprogram/upload/upload`
Form	Form	`tdesign-miniprogram/form/form`

Data Display Components (18)

Component	Description	Import Path
Avatar	Avatar	`tdesign-miniprogram/avatar/avatar`
Badge	Badge	`tdesign-miniprogram/badge/badge`
Cell	Cell	`tdesign-miniprogram/cell/cell`
Collapse	Collapse	`tdesign-miniprogram/collapse/collapse`
CountDown	Countdown	`tdesign-miniprogram/count-down/count-down`
Empty	Empty State	`tdesign-miniprogram/empty/empty`
Footer	Footer	`tdesign-miniprogram/footer/footer`
Grid	Grid	`tdesign-miniprogram/grid/grid`
Image	Image	`tdesign-miniprogram/image/image`
ImageViewer	Image Viewer	`tdesign-miniprogram/image-viewer/image-viewer`
Progress	Progress	`tdesign-miniprogram/progress/progress`
Result	Result	`tdesign-miniprogram/result/result`
Skeleton	Skeleton	`tdesign-miniprogram/skeleton/skeleton`
Sticky	Sticky	`tdesign-miniprogram/sticky/sticky`
Swiper	Swiper	`tdesign-miniprogram/swiper/swiper`
Table	Table	`tdesign-miniprogram/table/table`
Tag	Tag	`tdesign-miniprogram/tag/tag`
List	List	`tdesign-miniprogram/list/list`

Feedback Components (12)

Component	Description	Import Path
ActionSheet	Action Sheet	`tdesign-miniprogram/action-sheet/action-sheet`
Dialog	Dialog	`tdesign-miniprogram/dialog/dialog`
DropdownMenu	Dropdown Menu	`tdesign-miniprogram/dropdown-menu/dropdown-menu`
Guide	Guide	`tdesign-miniprogram/guide/guide`
Loading	Loading	`tdesign-miniprogram/loading/loading`
Message	Message	`tdesign-miniprogram/message/message`
NoticeBar	Notice Bar	`tdesign-miniprogram/notice-bar/notice-bar`
Overlay	Overlay	`tdesign-miniprogram/overlay/overlay`
Popup	Popup	`tdesign-miniprogram/popup/popup`
PullDownRefresh	Pull Down Refresh	`tdesign-miniprogram/pull-down-refresh/pull-down-refresh`
SwipeCell	Swipe Cell	`tdesign-miniprogram/swipe-cell/swipe-cell`
Toast	Toast	`tdesign-miniprogram/toast/toast`

AI Chat Components (9)

Component	Description	Import Path
ChatList	Chat List	`tdesign-miniprogram/chat-list/chat-list`
ChatMessage	Chat Message	`tdesign-miniprogram/chat-message/chat-message`
ChatSender	Chat Sender	`tdesign-miniprogram/chat-sender/chat-sender`
ChatContent	Chat Content	`tdesign-miniprogram/chat-content/chat-content`
ChatActionbar	Chat Action Bar	`tdesign-miniprogram/chat-actionbar/chat-actionbar`
ChatLoading	Chat Loading	`tdesign-miniprogram/chat-loading/chat-loading`
ChatMarkdown	Chat Markdown	`tdesign-miniprogram/chat-markdown/chat-markdown`
ChatThinking	Chat Thinking	`tdesign-miniprogram/chat-thinking/chat-thinking`
Attachments	Attachments	`tdesign-miniprogram/attachments/attachments`

Common Patterns

Button

<!-- Basic Buttons -->
<t-button theme="primary" size="large">Primary Button</t-button>
<t-button theme="light" size="large">Light Button</t-button>
<t-button size="large">Default Button</t-button>

<!-- Outline and Text Buttons -->
<t-button theme="primary" size="large" variant="outline"
  >Outline Button</t-button
>
<t-button theme="primary" size="large" variant="text">Text Button</t-button>

<!-- Icon Button -->
<t-button
  theme="primary"
  icon="app"
  content="Icon Button"
  size="large"
></t-button>

<!-- Loading State -->
<t-button theme="primary" size="large" loading>Loading</t-button>

<!-- Disabled State -->
<t-button theme="primary" size="large" disabled>Disabled</t-button>

<!-- Block Button -->
<t-button theme="primary" size="large" block>Block Button</t-button>

<!-- Ghost Button (transparent background) -->
<t-button theme="primary" ghost size="large">Ghost Button</t-button>

Input

{
  "usingComponents": {
    "t-input": "tdesign-miniprogram/input/input"
  }
}

<t-input
  label="Label"
  placeholder="Please enter"
  value="{{value}}"
  bind:change="onChange"
/>

Dialog

{
  "usingComponents": {
    "t-dialog": "tdesign-miniprogram/dialog/dialog"
  }
}

<t-dialog
  visible="{{visible}}"
  title="Dialog Title"
  content="Dialog content"
  confirm-btn="Confirm"
  cancel-btn="Cancel"
  bind:confirm="onConfirm"
  bind:cancel="onCancel"
/>

Toast

import Toast from 'tdesign-miniprogram/toast/index';

Toast({
  context: this,
  selector: '#t-toast',
  message: 'Toast message',
});

AI Chat Interface

{
  "usingComponents": {
    "t-chat-list": "tdesign-miniprogram/chat-list/chat-list",
    "t-chat-message": "tdesign-miniprogram/chat-message/chat-message",
    "t-chat-sender": "tdesign-miniprogram/chat-sender/chat-sender"
  }
}

<t-chat-list layout="single">
  <t-chat-message
    avatar="{{item.avatar}}"
    name="{{item.name}}"
    content="{{item.content}}"
    role="{{item.role}}"
  />
  <view slot="footer">
    <t-chat-sender bind:send="onSend" />
  </view>
</t-chat-list>

Component({
  data: {
    messages: [
      {
        role: 'user',
        content: [{ type: 'text', data: 'Hello' }],
      },
      {
        role: 'assistant',
        content: [{ type: 'text', data: 'Hello! How can I help you?' }],
      },
    ],
  },
  methods: {
    onSend(e) {
      const { value } = e.detail;
      // Handle send message
    },
  },
});

Style Customization

Method 1: Using Style Attribute

<t-button style="color: red">Custom Style</t-button>
<t-button custom-style="color: red">Custom Style</t-button>

Method 2: Disable Style Isolation

Override styles directly in page:

.t-button--primary {
  background-color: navy;
}

In custom components, enable styleIsolation:

Component({
  options: {
    styleIsolation: 'shared',
  },
});

Method 3: External Style Classes

<t-button t-class="my-button-class">Button</t-button>

.my-button-class {
  background-color: navy !important;
}

Method 4: CSS Variables

TDesign provides rich CSS variables for theme customization:

page {
  --td-button-primary-bg-color: #0052d9;
  --td-button-border-radius: 8rpx;
}

Dark Mode

1. Modify app.json

{
  "darkmode": true
}

2. Import Design Token

In app.wxss:

@import 'miniprogram_npm/tdesign-miniprogram/common/style/theme/_index.wxss';

3. Use CSS Variables

.text {
  color: var(--td-text-color-secondary);
}

4. Special Component Adaptation

For components wrapped in custom-tab-bar or root-portal, add .page class:

<view class="page">
  <t-tab-bar />
</view>

Reference Files

This skill includes comprehensive documentation in references/:

Basic Documentation

miniprogram/getting-started.md - Quick start guide
miniprogram/overview.md - Component overview
miniprogram/custom-style.md - Style customization
miniprogram/custom-theme.md - Theme customization
miniprogram/dark-mode.md - Dark mode

Component Documentation (miniprogram/components/)

button.md - Button
input.md - Input
dialog.md - Dialog
form.md - Form
... more component docs

AI Chat Component Documentation (miniprogram-chat/)

getting-started.md - Chat component quick start
sse.md - SSE streaming
components/chat-message.md - Chat message
components/chat-sender.md - Chat sender
components/chat-list.md - Chat list
... more chat component docs

Use Read tool to access specific reference files when detailed API information is needed.

tdesign-miniprogram