# npm
npm install tdesign-react
 
# yarn
yarn add tdesign-react
 
# pnpm
pnpm add tdesign-react

// 方式一：全量引入样式
import 'tdesign-react/es/style/index.css'
 
// 方式二：按需引入（推荐，配合 tree-shaking）
// 直接引入组件即可，样式会自动跟随

import React from 'react'
import { ConfigProvider } from 'tdesign-react'
import 'tdesign-react/es/style/index.css'
import zhConfig from 'tdesign-react/es/locale/zh_CN'
 
function App() {
  return (
    <ConfigProvider globalConfig={zhConfig}>
      <YourApplication />
    </ConfigProvider>
  )
}

import React from 'react'
import { Button, MessagePlugin } from 'tdesign-react'
import 'tdesign-react/es/style/index.css'
 
function App() {
  const handleClick = () => {
    MessagePlugin.success('欢迎使用 TDesign React!')
  }
 
  return (
    <div style={{ padding: 40 }}>
      <h1>Hello TDesign</h1>
      <Button theme="primary" onClick={handleClick}>
        点击我
      </Button>
    </div>
  )
}
 
export default App

# 克隆仓库
git clone https://github.com/Tencent/tdesign-react.git
cd tdesign-react
 
# 安装依赖
npm install
 
# 启动开发服务器
npm run dev
 
# 运行测试
npm run test
 
# 构建
npm run build
 
# Lint 检查
npm run lint

# 使用官方 Starter 模板快速启动
# 基于 Vite + React + TypeScript + TDesign
git clone https://github.com/tencent/tdesign-react-starter.git
cd tdesign-react-starter
npm install
npm run dev

// 通过 CSS 变量覆盖默认主题
import 'tdesign-react/es/style/index.css'
 
// 在入口文件中覆盖 Design Tokens
const style = document.documentElement
style.style.setProperty('--td-brand-color', '#0052D9')
style.style.setProperty('--td-warning-color', '#E37318')
style.style.setProperty('--td-error-color', '#D54941')
style.style.setProperty('--td-success-color', '#2BA471')

import { CloseIcon, CheckIcon, SearchIcon } from 'tdesign-icons-react'
 
function App() {
  return (
    <div>
      <CloseIcon />
      <CheckIcon />
      <SearchIcon />
    </div>
  )
}

# .github/workflows/ci.yml
name: CI
on: [push, pull_request]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '22'
      - run: npm ci
      - run: npm run lint
      - run: npm run typecheck
      - run: npm run test
      - run: npm run build

// config/theme.ts
import { ConfigProvider } from 'tdesign-react'
import 'tdesign-react/es/style/index.css'
import zhConfig from 'tdesign-react/es/locale/zh_CN'
 
// CSS 变量覆盖
const themeOverrides = {
  '--td-brand-color': '#0052D9',
  '--td-brand-color-hover': '#3377E0',
  '--td-brand-color-active': '#0045C0',
}
 
function App() {
  return (
    <ConfigProvider
      globalConfig={zhConfig}
      style={{ ...themeOverrides } as React.CSSProperties}
    >
      <YourApplication />
    </ConfigProvider>
  )
}

import React, { useState, useCallback } from 'react'
import { Table, Space, Button, Popconfirm, Tag, MessagePlugin } from 'tdesign-react'
import { EditIcon, DeleteIcon } from 'tdesign-icons-react'
 
function UserTable({ data, loading }) {
  const columns = [
    { colKey: 'name', title: '姓名', width: 150 },
    { colKey: 'email', title: '邮箱', width: 200 },
    {
      colKey: 'role',
      title: '角色',
      cell: (_, { row }) => (
        <Tag theme="primary" variant="light">
          {row.role}
        </Tag>
      ),
    },
    {
      colKey: 'ops',
      title: '操作',
      width: 160,
      cell: (_, { row }) => (
        <Space>
          <Button theme="primary" variant="text" icon={<EditIcon />} onClick={() => handleEdit(row)} />
          <Popconfirm
            content="确认删除该用户？"
            onConfirm={() => handleDelete(row.id)}
          >
            <Button theme="danger" variant="text" icon={<DeleteIcon />} />
          </Popconfirm>
        </Space>
      ),
    },
  ]
 
  return (
    <Table
      rowKey="id"
      columns={columns}
      data={data}
      loading={loading}
      pagination={{ defaultPageSize: 20 }}
      stripe
      hover
    />
  )
}