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 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 : Modify tsconfig.json (TypeScript projects) 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: Use in WXML: 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 Input Dialog Toast AI Chat Interface Style Customization Method 1: Using Style Attribute Method 2: Disable Style Isolation Override styles directly in page: In custom components, enable styleIsolation : Method 3: External Style Classes Method 4: CSS Variables TDesign provides rich CSS variables for theme customization: Dark Mode 1. Modify app.json 2. Import Design Token In app.wxss : 3. Use CSS Variables 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](https://tdesign.tencent.com/miniprogram/overview) [GitHub Repository](https://github.com/Tencent/tdesign miniprogram) [Component Demo Mini Program](https://developers.weixin.qq.com/s/NSVqRNmh8l5a) 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

tdesign-miniprogram