Tdesign Miniprogram

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:

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

Primary Button
Light Button
Default Button

Outline Button
Text Button

Loading

Disabled

Block Button

Ghost Button

Input

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

Dialog

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

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"
  }
}

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

Custom Style
Custom Style

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

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:

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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: joneqian
• Source: joneqian/claude-skills-suite
• License: MIT

Install and usage instructions live in the source repository linked above.