# TDesign Miniprogram for WeChat Mini Programs and uni-app > TDesign Miniprogram is a Tencent component library for WeChat Mini Programs, with a separate uni-app package for cross-platform Vue applications. Its documented path is direct NPM installation, component registration in JSON, and a minimum WeChat base library version of 2.6.5. **Tencent/tdesign-miniprogram** — Wechat MiniProgram and Uniapp UI components lib for TDesign - Repository: https://github.com/Tencent/tdesign-miniprogram - Website: https://tdesign.tencent.com/miniprogram - Stars: 1,782 · Forks: 347 - Language: Vue - License: MIT - Published: 2026-10-16 · Updated: 2026-10-16 · Language: en - Canonical page: https://hysenlabs.com/projects/tencent-tdesign-miniprogram ## A component library for Tencent's mini-program design language TDesign Miniprogram solves a specific consistency problem: teams building WeChat Mini Programs need reusable UI components that follow the TDesign design system instead of implementing buttons, inputs, layouts, and related controls independently. The repository is not a general-purpose Mini Program application template. It is a component library intended for developers who already have a Mini Program project and need a shared interface vocabulary. The primary package is `tdesign-miniprogram`, published on npm. The repository description also identifies `tdesign-uniapp` as a uni-app UI component library for the same design system. The root package manifest contains separate workspace directories and scripts for mini-program and uni-app development, including `packages/tdesign-uniapp` and `packages/tdesign-uniapp-chat`. This means the repository is organized as a monorepo, although the README's installation example focuses on WeChat Mini Program development. The audience is therefore narrower than that of a general JavaScript UI framework. It fits WeChat Mini Program developers who want TDesign's component conventions, and uni-app developers who specifically need the TDesign implementation for that target. The documentation does not describe a server, routing layer, data layer, or application runtime. Those concerns remain with the surrounding application. ## NPM packages, workspace layout, and framework boundaries The repository layout shows the implementation and tooling boundary. The root `package.json` is a private monorepo package named `tdesign-miniprogram-mono`, while published packages live under `packages/`. The root scripts include Mini Program commands such as `dev`, `build`, `build:dist`, `build:example`, and `update:icons`, as well as uni-app commands named `uniapp` and `uniapp:chat`. The documented user-facing dependency is installed with npm: ```bash npm i tdesign-miniprogram -S --production ``` This command installs the published mini-program component package as a production dependency. The README says that Mini Programs support installing third-party packages through NPM, and it directs developers to the WeChat documentation for that capability. The repository also uses `pnpm@11.20.0` as its declared package manager for workspace-level development. That declaration applies to the repository's own tooling and should not be confused with the consumer installation command shown in the README. The package is consumed by registering individual components rather than importing a single application entry point. For example, the README registers the button component in a JSON page or component configuration: ```json { "usingComponents": { "t-button": "tdesign-miniprogram/button/button" } } ``` The path inside `usingComponents` points to the component file within the installed package. This is a WeChat-specific registration model. It does not resemble a conventional Vue import in which every component is first imported into application code. The repository's uni-app scripts and directories indicate a separate adaptation path for Vue-oriented uni-app projects, but the README does not document a complete uni-app registration example. ## Installing tdesign-miniprogram and opening the first example For a consumer project, start from an existing WeChat Mini Program and add the published package with the README command: ```bash npm i tdesign-miniprogram -S --production ``` After installation, register the component you need in the relevant `JSON` file. For a button, use the documented mapping: ```json { "usingComponents": { "t-button": "tdesign-miniprogram/button/button" } } ``` The next step depends on the surrounding Mini Program setup. The README does not provide a complete page template, so it does not establish the exact surrounding button attributes or a complete runnable example for an arbitrary project. The component library supplies the registered component, while the application supplies its layout, data, event handlers, and platform configuration. To preview the repository's example project, the README gives these commands: ```bash # 安装项目依赖 npm install # 执行组件编译 npm run dev ``` The first command installs repository dependencies. The second runs the development compilation command defined by the root manifest, which invokes the Gulp development pipeline with `script/gulpfile.js`. The README then says to open WeChat Developer Tools and add the `_example` directory as the project. That preview path is intended for the repository's own example, not necessarily for a consumer project. There is a separate platform requirement. The README says that the example Mini Program needs a Mini Program AppID with access to the `微信同声传译` plugin. If that permission is unavailable, the `plugins` configuration in `app.json` should be removed so the example can run. This requirement belongs to the example project and should be distinguished from the basic component package itself. ## Development commands reveal how the examples are built The root scripts show that component source is compiled through Gulp rather than run directly from the repository root. `npm run dev` sets `NODE_ENV=development` and invokes `gulp dev` with `script/gulpfile.js`. The production equivalent is `npm run build`, which uses `NODE_ENV=production` and the same root-oriented Gulp workflow. Separate scripts, `build:dist` and `build:example`, indicate distinct distribution and example build paths. The package also exposes maintenance commands that can affect generated assets or component metadata. `npm run update:icons` runs `node script/update-icons.mjs`. Confirmed asset and locale commands include `npm run update:icons` and `npm run update:locale`, which invokes `script/gulpfile.locale.js` through Gulp. Linting is split by implementation. The Mini Program paths are covered by `npm run lint` and `npm run lintfix`, while uni-app paths have `npm run lint:uniapp` and `npm run lintfix:uniapp` in the repository manifest. This separation reinforces that the two targets share design-system goals but retain distinct source and linting structures. It also means a developer working across both targets cannot assume one lint command covers the entire workspace. ## Compatibility limits and the example's plugin constraint The clearest compatibility requirement is the WeChat base library. The README specifies a minimum base library version of `^2.6.5`. A project that must support an older base library cannot assume that every component will load, because the component package declares its minimum runtime through the platform's base library requirement. The README also warns about the `_example` Mini Program's `微信同声传译` plugin permission. It says that the AppID must have that permission for the example to run normally, and that the `plugins` configuration in `app.json` must be removed if it is unavailable. Removing the configuration may allow the example to start, but the README does not promise that the feature requiring that plugin will work. This is a concrete failure mode for copying the example configuration into an unrelated project. The project is therefore not a drop-in answer for every mini-program environment. A team should check the base library floor, the AppID and plugin situation, the component paths used by `usingComponents`, and whether the surrounding project relies on features outside the library's examples. The documentation does not claim browser support, native mobile support, React support, or a server-side rendering path. There is also a documentation gap around rollback and migration. The README links to the project homepage and GitHub issues, but it does not document a rollback procedure, compatibility policy for upgrading from one package version to another, or a migration guide. The release information confirms published versions, including `tdesign-miniprogram@1.17.0` and `@tdesign/uniapp@1.0.0`, but release versions alone do not establish upgrade compatibility. ## TDesign Miniprogram compared with application-owned components A real alternative is to build and maintain the UI components inside the consuming application. That approach gives the team direct control over component APIs, styling conventions, bundle contents, and release timing. It also avoids a dependency on the `tdesign-miniprogram` package path and the Mini Program base library requirement declared by the library. The trade-off is direct engineering and maintenance responsibility. The application team must define component behavior, style tokens, accessibility decisions, event handling, examples, and updates for platform changes. `tdesign-miniprogram` instead centralizes those component implementations and exposes them through a published package and `usingComponents` paths. Its value comes from adopting an existing TDesign component set, not from providing a complete application architecture. For uni-app applications, the relevant choice is between the TDesign uni-app package and platform-specific or application-owned components. The repository confirms the existence of `@tdesign/uniapp` and `@tdesign/uniapp-chat`, plus workspace scripts for those packages. It does not document every component, every supported platform, or the precise installation and registration procedure for `@tdesign/uniapp`. Those details need verification in the package documentation before selecting it for a multi-platform project. Maintenance status should also be considered separately from technical fit. The repository is not archived, and the last push was on 2026-10-16. Recent releases include `@tdesign/uniapp@1.0.0` and `@tdesign/uniapp-chat@1.0.0` on 2026-10-15, and `tdesign-miniprogram@1.17.0` on 2026-09-23. The README identifies the project as MIT licensed, so the repository indicates permissive use under the MIT terms. License interpretation for a particular product remains a separate compliance question, and the documentation does not provide a detailed upgrade policy. ## Conclusion Use TDesign Miniprogram when building a WeChat Mini Program that benefits from a shared TDesign component set, or use @tdesign/uniapp for a uni-app project after checking platform coverage. Do not adopt it when you need a fully documented alternative framework or when the required WeChat base library is unavailable. Verify the exact package, component registration path, platform-specific examples, and plugin requirements before adding it to a production project. ## FAQ ### How do I install tdesign-miniprogram in a WeChat Mini Program? Install the published package with `npm i tdesign-miniprogram -S --production`. Then register the component path in the relevant JSON configuration using the `usingComponents` field. ### What is the minimum WeChat base library version for TDesign Miniprogram? The README specifies `^2.6.5` as the minimum base library version. A project running an older version should check compatibility before using the package. ### Can I preview the TDesign Miniprogram examples in WeChat Developer Tools? The README says to run `npm install`, run `npm run dev`, and add the `_example` directory in WeChat Developer Tools. It also requires an AppID with access to the `微信同声传译` plugin, or removal of the `plugins` configuration from `app.json` if that permission is unavailable. ## Sources - [License: MIT](https://github.com/Tencent/tdesign-miniprogram/blob/develop/LICENSE) - [Project website](https://tdesign.tencent.com/miniprogram) - [README](https://github.com/Tencent/tdesign-miniprogram/blob/develop/README.md) - [Releases](https://github.com/Tencent/tdesign-miniprogram/releases) - [Tencent/tdesign-miniprogram on GitHub](https://github.com/Tencent/tdesign-miniprogram) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/tencent-tdesign-miniprogram