tdesign-vue: Tencent's desktop component library for Vue 2

What it is, and where it sits in the TDesign family

TDesign Vue is a UI component library for Vue 2 and desktop applications, published to npm as tdesign-vue. The family relationship is the part that shapes the library, and the README is explicit that the Vue implementation offers a consistent API and UI with the TDesign component libraries for the other frameworks. The other members are tdesign-vue-next for Vue 3.x, tdesign-react for React, and tdesign-miniprogram for the Wechat miniprogram. So a team with a mixed stack can have the same component behave the same way across frameworks, which is the point of a design system, and the Vue 2 package here is the one that serves the older Vue line. The repository is under the Tencent organisation, the default branch is develop, the primary language is TypeScript, and the licence is MIT.

The features, and the one that matters for a desktop application

The feature list is five items. Desktop application interaction, which is the distinguishing one, because this is a library aimed at the dense, mouse-driven interfaces of enterprise software rather than a mobile or content library. High quality UI components for Vue 2.x. Consistent API and UI with the other TDesign component libraries. Dark mode and a customisable theme. And support for tree-shaking. The first and the last of those are the ones that separate it from a generic Vue component set, since a desktop application needs tables, forms and editors that behave predictably with keyboard and mouse, and a large component library only stays viable in a bundle if unused components can be dropped.

Installation, and the naruto tag for Vue 2.7

The installation section has a detail that catches people out. The plain command is npm i tdesign-vue for Vue 2.6, and for Vue 2.7 the command is npm i tdesign-vue@naruto. The two are separate release lines rather than one package with a peer range, which means your choice of Vue 2 minor version determines your choice of TDesign tag. The documentation on developing and installing covers the differences between the bundles, and the README points there for the detail. That the library maintains a tagged line for a specific Vue minor version is a sign of how tightly it tracks the framework, which is fine for a design system but worth knowing before you pin.

npm i tdesign-vue  // for vue 2.6
npm i tdesign-vue@naruto  // for vue 2.7

Four build outputs, and what the sideEffects list is telling you

The package manifest shows the packaging in detail. The main entry is the CommonJS build at cjs/index-lib.js, the module field points at the ES module build at es/index.js, the typings are at es/index.d.ts, and there is a browser global bundle at dist/tdesign.min.js served through both unpkg and jsdelivr. The published files are the es, esm, cjs and lib directories, the dist bundle, the licence, the readme, the changelog and a helper directory. The sideEffects list is the more interesting field, since it tells the bundler what may be dropped. It lists the .vue files, the dist, site and examples directories, and the style directories under es and esm, meaning the component files and their styles are considered to have side effects and will not be shaken out, while the rest can be. The build produces those formats with Rollup and then emits type declarations four separate times with tsc, once for each output directory.

Usage, and the one line that decides your bundle

The usage example is three imports and one call. You import Vue, you import TDesign from tdesign-vue, you import the stylesheet from tdesign-vue/es/style/index.css, and you call Vue.use(TDesign) to install the whole set as a plugin. That last call is what makes the example simple and also what makes it expensive, since registering the library globally pulls in every component. The tree-shaking support the feature list mentions is the alternative path, using the per-component imports rather than the plugin, and the styling is imported separately by path. The documentation on developing and installing covers the differences between the bundles, which is where the practical guidance for a real project lives, because the choice between a global install and selective imports is the difference between a large bundle and a small one.

import Vue from 'vue';
import TDesign from 'tdesign-vue';

import 'tdesign-vue/es/style/index.css';

Vue.use(TDesign);

Browser support, and the versions that set the floor

The browser support table gives the minimum versions for the four engines the project cares about, and those numbers are the real constraint. Edge 91 or later, Firefox 83 or later, Chrome 91 or later, and Safari 14.1 or later. The project links a browser compatibility page in the TDesign wiki for more detail, which is where the reasoning behind the numbers lives. Those floors are recent enough to be unremarkable for a 2026 project, and they are the kind of number a team building a corporate internal tool rarely needs to think about, since the browser fleet is usually managed and current. The more relevant question for an internal tool is whether the components cover the interaction patterns the application needs, and the Desktop application interaction feature is the project telling you that is what it optimised for.

How to try it, and the documentation set in the repository

The Quick Start points at TDesign Starter, an application built with the components that you can open in a browser to see them working, which is a better first step than reading the docs. The repository itself carries a substantial documentation set, with DEVELOP_GUIDE.md, TEST_GUIDE.md, PUBLISH.md and CONTRIBUTING.md alongside a site/ directory holding the documentation site, a script/ directory with the build and coverage tooling, a helper/ directory, and test/ directories. The tooling configuration in the top level is a mix of Vue-era and modern practice, with an .eslintrc, a .prettierrc.js, a babel.config.js, a commitlint.config.js, a vitest.config.js, Husky hooks and a .node-version file. The coverage badge is generated by a script rather than by a service, and the site is built and prerendered from script/prerender.mjs, with the 404 page copied from the built index. The releases are 1.15.2 on 2026-07-14, and 1.16.0 and 1.16.1 both on 2026-07-29.

Feedback, contribution and the state of the project

Contributions are welcome and the README asks you to read the contributing guidelines before opening a pull request, which is the usual convention and is enforced by a commitlint configuration and Husky hooks. Feedback goes through GitHub issues or a QR code linking to the user groups, and the screenshot of the group poster in the README is generated from a path in the main TDesign site repository rather than being stored here, which tells you the site content is shared across the family. There is a leaderboard of contributors rendered from openomy. The last push to the repository was on 2026-10-15, the repository is not archived, and the primary language is TypeScript even though the runtime target is Vue 2, since the components are written in TypeScript and compiled down. The licence is MIT with the file in the repository.

Editorial conclusion

tdesign-vue suits a team already inside the TDesign family, or a Vue 2 codebase that needs a desktop-grade component set with a design system behind it rather than a set of loose widgets. It is the wrong choice for a new Vue 3 project, since the Vue 3 implementation is a separate package, tdesign-vue-next, and a poor fit if you need a small bundle, since the library ships four build formats and the full import path pulls in the whole component set. Before adopting it, decide which Vue 2 version you are on, because the installation differs between 2.6 and 2.7 with a separate naruto tag for the latter, and read the bundle differences documentation, because the choice between them determines your tree-shaking story and your style import path.

Frequently asked questions

Official sources

1. License: MIT
2. Project website
3. README
4. Releases
5. Tencent/tdesign-vue on GitHub