TDesign — Enterprise Design System by Tencent

Introduction

TDesign is an enterprise design system created by Tencent that provides consistent UI components across multiple frameworks. It ships implementations for Vue 2, Vue 3, React, and WeChat mini-programs, all following the same design specifications to maintain visual consistency across products.

What TDesign Does

• Provides 80+ components for forms, data display, navigation, and feedback across frameworks
• Maintains parallel implementations for Vue 2, Vue 3, React, and mini-programs
• Includes a design token system with customizable themes
• Supports internationalization with multiple locale packs
• Offers Figma and Sketch design resources synchronized with the code components

Architecture Overview

TDesign is organized as a monorepo with shared design tokens and separate framework-specific component packages. The design token layer defines colors, typography, spacing, and elevation values as CSS custom properties. Each framework implementation consumes these tokens and renders components following the same visual specification. Components are built with TypeScript and support tree shaking for optimized bundle sizes.

Self-Hosting & Configuration

• Install the framework-specific package from npm (e.g., tdesign-vue-next or tdesign-react)
• Import the base CSS or use the on-demand style loading plugin
• Customize themes by overriding CSS custom properties or using the theme generator tool
• Configure component defaults globally via a Provider component
• Supports Vite, Webpack, and framework CLIs for Vue and React

Key Features

• Multi-framework consistency with Vue 2, Vue 3, React, and mini-program support
• Design token system with a visual theme generator tool
• On-demand component loading to minimize bundle size
• Comprehensive component set covering enterprise admin use cases
• Design resources (Figma, Sketch) kept in sync with code releases

Comparison with Similar Tools

• Ant Design — established enterprise library for React; TDesign offers multi-framework support
• Element Plus — popular Vue 3 enterprise library; TDesign covers React and mini-programs too
• MUI — React Material Design library; TDesign follows its own design language
• Arco Design — ByteDance's design system; TDesign is Tencent's equivalent with broader framework coverage
• Semi Design — another enterprise system; TDesign includes mini-program components

FAQ

Q: Which frameworks does TDesign support? A: Vue 2, Vue 3, React, and WeChat mini-programs, with each maintained as a separate npm package.

Q: Can I customize the theme? A: Yes. TDesign provides a theme generator tool and supports CSS variable overrides for colors, fonts, and spacing.

Q: Is TDesign suitable for non-Chinese projects? A: Yes. TDesign supports internationalization and the documentation is available in English.

Q: Is TDesign free for commercial use? A: Yes. It is released under the MIT license.

Sources

• https://github.com/Tencent/tdesign
• https://tdesign.tencent.com