tdesign-miniprogram

name	tdesign-miniprogram
description	TDesign Mini Program UI component library by Tencent. Use for building WeChat mini apps with TDesign components, design system, and best practices.

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.

Key Requirements

• Minimum base library version: ^2.12.0
• Build npm in WeChat DevTools required
• Remove "style": "v2" from app.json

Resources

• TDesign Official Documentation
• GitHub Repository
• Component Demo Mini Program

Notes

• This skill was automatically generated from TDesign official documentation
• Reference files preserve the structure and examples from source docs
• Some reference content remains in Chinese as per official documentation