React for Web

Installation

npm

npm i tdesign-react

unpkg

<link rel="stylesheet" href="https://unpkg.com/tdesign-react/dist/tdesign.min.css" />
<script src="https://unpkg.com/tdesign-react/dist/tdesign.min.js"></script>

Please note that unpkg usage is not recommended as it will download the entire component library. Production projects will be directly affected by version updates, and may also be affected by the stability of the CDN.

The package of tdesign-react provides kinds of bundles, read the documentation for the detail of differences between bundles.

Usage

With the help of building tools such as Webpack or Rollup that support tree-shaking features, you can achieve the effect of importing on demand.

import { Button } from 'tdesign-react';
import 'tdesign-react/es/style/index.css'; // global design variables

Customize theme

Since the original styles are written in Less, you need to handle the compilation of Less files yourself (for example, by installing Less and Less-loader).

read this file fro the complete less variables definition of TDesign.

import { Button } from 'tdesign-react/esm/';
import 'tdesign-react/esm/style/index.js'; // 少量公共样式

to customize theme with vite

// vite.config.js
export default {
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          '@btn-height-default': '40px',
        },
      },
    },
  },
};

to customize theme with webpack

// webpack.config.js
module.exports = {
  rules: [{
    test: /.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader', // translates CSS into CommonJS
    }, {
      loader: 'less-loader', // compiles Less to CSS
+     options: {
+       lessOptions: { // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。
+         modifyVars: {
+           '@btn-height-default': '40px',
+         },
+         javascriptEnabled: true,
+       },
+     },
    }],
  }],
}

How to use React with Next.js

Next.js does not support importing css style files by default. But the es bundle of tdesign-react automatically includes the corresponding css style file, which causes errors in the project. To solve this, we have provided a set of style-free component library codes stored in the lib bundle.

When using Next.js, you need to adjust how you use these components.

'use client'

import { Button } from 'tdesign-react/lib/';
import 'tdesign-react/dist/tdesign.css';

In addition, the code exported by the lib package is written in es6 and is located in the node_modules. It will be skipped by Webpack during compilation, and you need to configure it in next.config.js

const nextConfig = {
  experimental: {
    transpilePackages: ['tdesign-react'],
  },
};

module.exports = nextConfig;

Browser Support

IE / Edge	Firefox	Chrome	Safari
Edge >=91	Firefox >=83	Chrome >=91	Safari >=14.1

Read our browser compatibility for more details.

FAQ

Q: Does TDesign have a built-in reset style for unifying the default styles of page elements?

A: Since version 0.36.0, tdesign-react no longer imports reset.less. The biggest impact is the removal of the global box model setting

*,
*::before,
*::after {
  box-sizing: border-box;
}

If your project development depends on the reset style, you can import it from the dist directory.

import 'tdesign-react/dist/reset.css';