# tdesign-react: Tencent's desktop component library for React 16.x

> TDesign React is a TypeScript component library for desktop React applications, published by Tencent as the React half of a multi framework design system that also targets Vue and WeChat miniprograms. It ships dark mode, theming and tree shaking, but it is anchored to React 16.x and a browser floor set by Safari 14.1.

**Tencent/tdesign-react** — A React UI components lib for TDesign.

- Repository: https://github.com/Tencent/tdesign-react
- Website: https://tdesign.tencent.com/react
- Stars: 973 · Forks: 378
- Language: TypeScript
- License: MIT
- Published: 2026-10-20 · Updated: 2026-10-20 · Language: en
- Canonical page: https://hysenlabs.com/projects/tencent-tdesign-react

## A component library scoped to desktop React

TDesign React is a UI component library for React, and the README is specific about two constraints that define the product. The library targets React 16.x, and it is aimed at desktop applications. That is a narrower promise than a general purpose React library, and it is the reason the feature list leads with desktop application interaction rather than with responsiveness.

The library is published by Tencent as the React implementation of TDesign, a design system that spans frameworks. The README describes the goal as a consistent API and UI with the TDesign component libraries for other frameworks, and the ecosystem is real rather than aspirational: alongside this repository there is a component library for Vue 3.x, tdesign-vue-next, one for Vue 2.x, tdesign-vue, and one for WeChat miniprogram, tdesign-miniprogram.

That cross framework consistency is the core argument for adopting it. A company with a React admin console, a Vue product site and a WeChat miniprogram would otherwise maintain three unrelated component sets with three different visual languages, and TDesign is the attempt to make one set of decisions hold across all three.

The primary language is TypeScript, the licence is MIT, and the recent releases include tdesign-react 1.18.4 on 2026-09-26 and 1.18.3 on 2026-09-04, plus a separate scoped package, @tdesign-react/chat at 1.1.0 on 2026-09-11.

## What TDesign React actually ships

The feature list is short, and each entry carries weight.

Dark mode and customizable theme come as one item. For a design system used across multiple front ends, a theme layer is what lets one implementation serve a marketing site and an internal admin tool with different density and colour decisions, so this is a load bearing feature rather than a toggle.

Tree shaking support matters for a different reason. A component library that a team imports partially still has to agree on how the parts are exported, and the tdesign-react package provides several bundle variants. The README does not spell out the differences itself, and instead points to the develop-install documentation in the main TDesign repository for the detail on the differences between bundles. That is a real gap for anyone choosing a bundle, since the choice affects both build size and how styles are loaded.

The high quality UI components for React line is the least actionable item on the list, since it claims quality without naming components or showing a catalogue. For an evaluation, the more useful entry points are the documentation site, the TDesign Starter application for seeing the components in a working app, and the component examples inside the repository itself.

## Installing with npm, yarn or pnpm

Installation is a single dependency, and the project supports the three common JavaScript package managers with the same package name:

```shell
npm i tdesign-react
```

```shell
yarn add tdesign-react
```

```shell
pnpm add tdesign-react
```

The style sheet has to be imported separately, and the component has to come from the package root rather than from a deep path. The README gives this as the minimal working example:

```tsx
import React from 'react';
import { Button } from 'tdesign-react';
import 'tdesign-react/es/style/index.css';

function App() {
  return <Button>Hello TDesign</Button>;
}

ReactDOM.createRoot(document.getElementById('app')).render(<App />);
```

Two details in that snippet carry the weight. The CSS import path points into the es directory, which ties the style import to one specific build layout, and the example uses createRoot, the React 18 style root API, even though the library targets React 16.x. That mismatch is worth resolving in your own application before you copy the snippet verbatim, because React 16 and React 18 differ in how roots are created.

For a preview before installing anything, TDesign Starter is available online and shows the components inside a working application.

## The browser floor is Chrome 84 and Safari 14.1

The support matrix is stated in the README as a table, and it is the part of the requirements most likely to surprise a team on a modern stack.

Edge is supported from version 84, Firefox from 83, Chrome from 84, and Safari from 14.1, with a browser compatibility wiki page linked for more detail.

Read next to the React 16.x target, that baseline tells you the library was designed around a generation of browsers rather than the current ones. If your application already requires a newer baseline, for instance because other dependencies need it, then the library is not the constraint and you get its features for free. If you need to support older browsers than Safari 14.1, this library does not work for you without a polyfill strategy the README does not mention.

The desktop framing also has consequences that the component list does not spell out. There is no claim of mobile layouts, small screen breakpoints or touch first interaction, so a team building a responsive product for phones would be adapting a desktop library rather than using one designed for the job.

## Working inside the monorepo: pnpm, workspace packages and site scripts

The repository is a monorepo, and the root package.json describes itself as tdesign-react-mono with private set to true and pnpm@10.33.0 as the package manager. The layout is a pnpm workspace with a packages directory, and several packages are visible through the script definitions: packages/tdesign-react/site for the documentation site, packages/tdesign-react-aigc for the AI oriented variant with its own site, packages/components for the component sources, and packages/pro-components for the professional components including a chat package.

The scripts tell you how a contributor works. The dev script starts the site in development mode, site builds the JSX demos and then the site, and site:preview serves the built result. There are separate aigc variants of the same three commands, which tells you the AI package is developed in parallel with a nearly identical toolchain rather than as an afterthought.

Quality control is script driven as well. The lint script runs a TypeScript check through lint:tsc against tsconfig.dev.json and then ESLint over the tree with --max-warnings 0, so warnings are errors. Tests run under Vitest, configured in vitest.config.mts, and coverage badges are generated by a script. There are several build tsconfig files, one for development, one for the build, one for the AIGC build and one for Vitest, which is a hint at how many different compilation targets this workspace carries.

There is also a dev preinstall hook, pnpm:devPreinstall, that runs a node script before installation, and an init script that initialises and updates git submodules, so a contributor needs the submodules in place before the workspace will build.

## MIT licence, a moving default branch and versioned releases

The licence is MIT, and the README points at the licence file for the full text. That is the simplest possible answer for a component library that companies intend to ship inside commercial products, and it removes the question that copyleft licences raise in a component library context.

The default branch is develop, not master, and the contributing guidelines live in CONTRIBUTING.md, with a separate PUBLISH.md describing the release process. The last push was on 2026-10-19, so work on the library is current.

Release discipline is visible in the tags. tdesign-react moved to 1.18.4 on 2026-09-26 and 1.18.3 on 2026-09-04, a patch level step about three weeks apart, and the chat package was versioned independently at @tdesign-react/chat 1.1.0 on 2026-09-11. That last point is a practical one for anyone assembling a dependency tree: the chat components are not part of the main tdesign-react package, so consuming them means adding a separate scoped dependency and tracking its own version line.

The repository also carries agent and editor configuration files at the root, among them AGENTS.md and directories for Claude, Cursor and CodeBuddy, plus commitlint, husky hooks, an eslint configuration and an editorconfig. That is a signal about how the project expects contributions to be produced and checked.

## Conclusion

tdesign-react fits teams already working inside the TDesign ecosystem, especially product teams that need the React, Vue and WeChat miniprogram libraries to look and behave the same across platforms. It does not fit a team that needs React 18 idioms or mobile layouts, and the React 16.x target is the first thing to check. Verify first which bundle variant you import, since the package ships several and the differences are documented outside this repository, and confirm the browser baseline of Safari 14.1 and Chrome 84 against your own support matrix.

## FAQ

### How do I install tdesign-react?

It is a single dependency installed with npm i tdesign-react, yarn add tdesign-react or pnpm add tdesign-react. The stylesheet has to be imported separately, for example with import 'tdesign-react/es/style/index.css'.

### Which React version does tdesign-react support?

The library targets React 16.x and desktop applications. The browser matrix is Edge 84 or newer, Firefox 83 or newer, Chrome 84 or newer and Safari 14.1 or newer.

### Does tdesign-react support dark mode and theming?

Yes. Dark mode and customizable theme are both listed features, and tree shaking support is listed alongside them. The package ships several bundle variants, and the differences between them are documented in the develop-install guide in the main TDesign repository.

### How do I use the TDesign chat components in React?

They are published as a separate scoped package, @tdesign-react/chat, which was released at version 1.1.0 on 2026-09-11. It is versioned independently of the main tdesign-react package, so it is a separate dependency with its own release line.

## Sources

- [License: MIT](https://github.com/Tencent/tdesign-react/blob/develop/LICENSE)
- [Project website](https://tdesign.tencent.com/react)
- [README](https://github.com/Tencent/tdesign-react/blob/develop/README.md)
- [Releases](https://github.com/Tencent/tdesign-react/releases)
- [Tencent/tdesign-react on GitHub](https://github.com/Tencent/tdesign-react)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/tencent-tdesign-react