TDesign React is a comprehensive React UI component library designed for desktop applications, maintained as a monorepo at https The repository provides 50+ production-ready components with consistent design language, framework-agnostic utilities, and a complete build and testing infrastructure. The library targets React 16.13.1 and above, supporting versions through React 19 with an adapter system.
This document provides a high-level overview of the repository architecture, package organization, and core systems. For detailed information about specific subsystems, refer to:
The repository is structured as a pnpm-based monorepo named tdesign-react-mono, delivering the tdesign-react npm package as its primary artifact. The library emphasizes desktop interaction patterns, providing components for layout, forms, data display, feedback, and navigation with full TypeScript support.
Key Characteristics:
sideEffects configurationSources: README.md1-106 packages/tdesign-react/package.json1-99 package.json1-158
The monorepo contains five primary workspace packages:
| Package Path | Purpose | Key Details |
|---|---|---|
packages/tdesign-react | Main library entry | Published to npm, contains build configuration and documentation site |
packages/components | Component implementations | TypeScript source files, examples (_example/), tests (__tests__/) |
packages/common | Shared submodule | Design tokens, CSS styles, framework-agnostic utilities |
packages/tdesign-react-aigc | AIGC components | Specialized AI-focused components |
packages/pro-components/chat | Chat component | Standalone chat component |
Sources: CONTRIBUTING.md1-207 package.json1-158 packages/tdesign-react/package.json1-99
The library publishes multiple module formats to support different consumption patterns:
Entry Points (from packages/tdesign-react/package.json:6-10):
main: CommonJS entry for Node.js and older bundlersmodule: ES module entry for modern bundlers (Webpack, Vite, Rollup)unpkg / jsdelivr: UMD bundles for direct browser usage via CDNtypings: TypeScript declaration files for type checkingSide Effects Configuration:
The package specifies sideEffects (packages/tdesign-react/package.json21-29) to enable aggressive tree-shaking:
es/**/style/**, esm/**/style/**es/_util/react-19-adapter.jsdist/*Sources: packages/tdesign-react/package.json1-99
React Version Support:
Critical Dependencies:
@popperjs/core: Powers positioning for Popup, Tooltip, Select dropdown, DatePicker, etc.dayjs: Date manipulation for DatePicker, Calendar, TimePicker componentstdesign-icons-react: Icon component library with 200+ iconssortablejs: Enables drag-and-drop functionality in Table, Tree, and other componentsSources: packages/tdesign-react/package.json67-97 README.md27-35
The library provides components organized into five functional categories, with foundational infrastructure components supporting cross-cutting concerns. Each component is located in packages/components/<component-name>/ with the following structure:
Standard Component Directory:
packages/components/<component>/
├── <Component>.tsx # Main implementation
├── type.ts # TypeScript prop definitions
├── defaultProps.ts # Default property values
├── __tests__/ # Unit tests
├── _example/ # TSX demo files
├── _example-js/ # Generated JSX demos
└── style/ # Component-specific styles
Sources: CONTRIBUTING.md40-86 packages/tdesign-react/CHANGELOG.md1-360
Build Commands (from package.json:30-37):
prebuild: rimraf cleans output directoriesbuild: Runs Rollup for UMD bundles, then parallel TypeScript compilationbuild:tsc-es: Generates ES modules in es/build:tsc-esm: Generates ES modules in esm/build:tsc-cjs: Generates CommonJS in cjs/build:tsc-lib: Generates library format in lib/The build system produces multiple identical module formats to support different ecosystem preferences and CDN requirements.
Sources: package.json5-42 packages/tdesign-react/package.json38-48
The repository implements a comprehensive three-tier testing strategy:
| Test Type | Framework | Location | Purpose |
|---|---|---|---|
| Unit Tests | Vitest | packages/components/**/__tests__/ | Component logic and behavior |
| SSR Tests | Jest + Node | test/ssr/ | Server-side rendering compatibility |
| Snapshot Tests | Vitest | test/snap/ | UI regression detection (CSR + SSR) |
Key Snapshot Files:
test/snap/__snapshots__/csr.test.jsx.snap (243.97 importance): Client-side rendering snapshotstest/snap/__snapshots__/ssr.test.jsx.snap (164.26 importance): Server-side rendering snapshotsCoverage System: The repository uses dual coverage providers (package.json93-94):
@vitest/coverage-istanbul: For detailed coverage reports@vitest/coverage-v8: For fast coverage collectionFor detailed testing documentation, see Testing Framework.
Sources: package.json24-29 test/snap/__snapshots__/csr.test.jsx.snap1-20 test/snap/__snapshots__/ssr.test.jsx.snap1-20
Quick Start Commands:
pnpm run init: Initialize packages/common Git submodulepnpm install: Install dependenciespnpm run dev: Start development server at http://127.0.0.1:15000Development Requirements:
http://127.0.0.1:15000/react/components/<component-name>For comprehensive development guidelines including Git workflow, code quality standards, and contribution process, see Development Philosophy and Contribution Guidelines.
Sources: CONTRIBUTING.md13-35 package.json5-42 README.md37-63
TDesign React is released under the MIT License, permitting free use, modification, and distribution in both commercial and non-commercial projects. The library is published to npm as tdesign-react and distributed via CDN through unpkg and jsdelivr.
Registry Information:
Sources: LICENSE1-10 packages/tdesign-react/package.json30-32
Refresh this wiki
This wiki was recently refreshed. Please wait 7 days to refresh again.