TDesign

Overview

TDesign is Tencent's official enterprise design system and open-source UI solution. Distilled from Tencent's extensive product ecosystem, TDesign provides complete, consistent component libraries for React, Vue 3, Vue 2, Flutter, and Mini Programs.

Key Features

• 🐧 Tencent Enterprise Heritage: Battle-tested across massive enterprise systems and consumer platforms within Tencent.
• 🌐 Multi-Framework & Multi-Platform: Native solutions for React, Vue 3, Vue 2, Mobile, and WeChat Mini Programs.
• 🎨 Flexible Design Tokens: Extensive configuration options for color themes, layout scales, and accessibility compliance.
• 🛠️ Starter Templates: Official TDesign Starter scaffolds for instant full-stack project bootup.

Installation & Quick Start

npm install tdesign-react

Basic React Example

import React from 'react';
import { Button, Space, DatePicker } from 'tdesign-react';
import 'tdesign-react/dist/tdesign.css';

export default function App() {
  return (
    <Space direction="vertical">
      <DatePicker />
      <Button theme="primary">Primary Button</Button>
    </Space>
  );
}

When to Choose

• Ideal For: Tencent ecosystem projects, cross-platform apps (Web + Mini Programs + Flutter), and enterprise enterprise portals.
• Alternatives: For Alibaba ecosystem, choose Ant Design; for ByteDance ecosystem, choose Arco Design.