Skip to content

Tencent/tdesign

Repository files navigation

TDesign Logo

English | 简体中文

TDesign is a comprehensive Enterprise Design System, and component libraries have been implemented for versions such as Vue, React, and Wechat MiniProgram. TDesign has advantages when used for building applications with consistent design and cross-platform, multi-tech stack capabilities.

TDesign

Repositories

The following are the repositories for TDesign:

Repositories for Desktop Components

Repository Description Status
tdesign-vue Vue.js UI components lib for TDesign 1.0 LTS
tdesign-vue-next Vue3.x UI components lib for TDesign 1.0 LTS
tdesign-react React UI components lib for TDesign 1.0 LTS

Repositories for Mobile Components

Repository Description Status
tdesign-miniprogram Wechat MiniProgram UI components lib for TDesign 1.0 LTS
tdesign-mobile-vue Vue3.x Mobile UI components lib for TDesign 1.0 LTS
tdesign-mobile-react React Mobile UI components lib for TDesign Alpha
tdesign-flutter Flutter UI components lib for TDesign Alpha

Repositories for Shared

Repository Description
tdesign TDesign main repository and documentation
tdesign-icons A mono repo for TDesign Icons
tdesign-common TDesign Common Style and Utils

Repositories for Out-of-box Starter Kits

Repository Description
tdesign-starter-cli CLI tool for TDesign Starter kit
tdesign-vue-starter starter-kit for TDesign Vue UI components
tdesign-vue-next-starter starter-kit for TDesign Vue Next UI components
tdesign-react-starter starter-kit for TDesign React UI components
tdesign-miniprogram-starter-retail starter-kit for TDesign Wechat Miniprogram UI components

Why TDesign

Before 2019, there were many internal design system and component library projects within Tencent, centered around product-focused "decentralized" rapid iterations.

In 2019, Tencent established the Open Source Collaboration Committee. Through internal open-source collaboration, it organized different teams working on similar technology products to collaborate.

TDesign is the collaborative outcome of frontend and design under Tencent's open-source collaboration, with the aim to jointly build a comprehensive and versatile design system and component library.

image

Development of TDesign.

TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.

Many participants started by trying out the component library in their personal projects, advancing to submit their first Issue, then their first Feature MR, and gradually becoming involved in Code Review and solution-formulating tasks, eventually turning into core contributors. In the past year, TDesign has closed 1k+ issues and conducted 5k+ Code Reviews to maintained a weekly iterative release of new versions.

TDesign currently supports multiple platforms and mainstream front-end UI framework. Desktop versions for Vue2, Vue3, and React, as well as mobile versions for WeChat Mini Programs, have been launched as stable versions. Mobile React and QQ Mini Program versions have been released the Alpha versions for internal testing.

Why Open-source

Through open sourcing, TDesign aims to refine a complete and user-friendly component library and cultivate a rich design ecosystem.

With the help of the community, TDesign aspires to maintain ongoing communication with more product designers and developers, evolving into a more valuable product.

Open-source marks a new beginning for TDesign.

For TDesign's subsequent development plan, please refer to the TDesign upcoming plans.

Features

Comprehensive

image

Consistency

  • Maintain a unified design values and visual style, helping products maintain a consistent user experience across different platforms during the design and development process.
  • Consistently defined and implemented APIs across various tech stacks provide an advantage when building unified, cross-platform, and cross-tech stack applications.

image

Usability

  • Extract Tencent design experience from various business scenarios and offer universal design guidelines to lower the barriers to entry.
  • Support extend the design styles by using Design Token.
  • Offer TDesign Starter Kit to help developers get started.

image

Documentations

Read more in the official website of TDesign.

Design Guidelines

TDesign distills Tencent's years of internal design experience into professional design guidelines, providing universal design solutions.

For more information, refer to the guide section of each component, such as Button.

Design Resources

Contributors

❤️ Thanks for all the TDesign contributors:

Contributing Guide

Any contributions to TDesign are welcome. Please read 《contributing for TDesign》 for more information.

License

The MIT License. Please see the license file for more information.