wangdicoder · wangdicoder · May 16, 2026
diff --git a/README.md b/README.md
@@ -41,7 +41,7 @@
 
 ## Highlights
 
-- **80+ components** — buttons, forms, data display, navigation, feedback, and more
+- **86 documented component pages** — buttons, forms, data display, navigation, feedback, charts, icons, and more
 - **Visual Theme Editor** — 20+ built-in presets inspired by popular design systems; customise colours, typography, and spacing in real time without writing code
 - **Dark mode** — built-in light/dark themes with system preference detection and a `useTheme` hook
 - **TypeScript** — written in strict TypeScript with complete type definitions
@@ -110,25 +110,29 @@ See the [Theming Guide](https://wangdicoder.github.io/tiny-design/theme/customis
 
 ## Packages
 
-| Package | Description |
-| ------- | ----------- |
-| [@tiny-design/react](./packages/react) | Core component library |
-| [@tiny-design/tokens](./packages/tokens) | V2 design tokens and theme runtime |
-| [@tiny-design/icons](./packages/icons) | SVG icon components |
-| [@tiny-design/cli](./packages/cli) | CLI for the Tiny Design component library |
-| [@tiny-design/mcp](./packages/mcp) | MCP server for AI assistants to access the component library |
+| Package                                    | Description                                                  |
+| ------------------------------------------ | ------------------------------------------------------------ |
+| [@tiny-design/react](./packages/react)     | Core component library                                       |
+| [@tiny-design/tokens](./packages/tokens)   | V2 design tokens and theme runtime                           |
+| [@tiny-design/icons](./packages/icons)     | SVG icon components                                          |
+| [@tiny-design/charts](./packages/charts)   | Theme-aware chart components built on Recharts               |
+| [@tiny-design/cli](./packages/cli)         | CLI for the Tiny Design component library                    |
+| [@tiny-design/mcp](./packages/mcp)         | MCP server for AI assistants to access the component library |
+| [@tiny-design/extract](./packages/extract) | Internal metadata extractor used by the CLI and MCP packages |
 
 ## Components
 
-| Category | Count | Examples |
-| -------- | :---: | -------- |
-| Foundation | 5 | Button, Icon, Image, Link, Typography |
-| Layout | 7 | Grid, Flex, Space, Split, Divider, Aspect Ratio |
-| Navigation | 7 | Menu, Breadcrumb, Dropdown, Pagination, Steps, Anchor, SpeedDial |
-| Data Display | 19 | Card, Carousel, Collapse, Tag, Tooltip, Tree, Table |
-| Form | 22 | Input, Select, DatePicker, TimePicker, Checkbox, Radio, Slider |
-| Feedback | 13 | Modal, Drawer, Overlay, Message, Notification, Alert, Skeleton |
-| Miscellany | 5 | ConfigProvider, BackTop, Sticky, Keyboard, CopyToClipboard |
+The documentation currently covers 86 component pages across React, Icons, and Charts.
+
+| Category     | Count | Examples                                                                 |
+| ------------ | :---: | ------------------------------------------------------------------------ |
+| Foundation   |   5   | Button, Icon, Image, Link, Typography                                    |
+| Layout       |   9   | AspectRatio, Divider, Flex, Grid, Layout, Space, Split, Waterfall        |
+| Navigation   |   7   | Anchor, Breadcrumb, Dropdown, Menu, Pagination, QuickActions, Steps      |
+| Data Display |  23   | Avatar, Calendar, Card, Chart, Collapse, Table, Tooltip, Tree            |
+| Form         |  23   | AutoComplete, Cascader, DatePicker, InputOTP, Select, TimePicker, Upload |
+| Feedback     |  14   | Alert, Drawer, Modal, Overlay, Message, Notification, Skeleton, Tour     |
+| Miscellany   |   5   | ConfigProvider, BackTop, Sticky, Keyboard, CopyToClipboard               |
 
 ## Internationalization
 
@@ -140,16 +144,16 @@ import { ConfigProvider, zh_CN } from '@tiny-design/react';
 </ConfigProvider>
 ```
 
-| Locale | Language |
-| ------ | -------- |
+| Locale | Language          |
+| ------ | ----------------- |
 | en_US  | English (default) |
-| zh_CN  | 简体中文 |
+| zh_CN  | 简体中文          |
 
 ## Browser Support
 
 | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" /><br>Edge | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" /><br>Firefox | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" /><br>Chrome | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" /><br>Safari |
-| --- | --- | --- | --- |
-| last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| last 2 versions                                                                                                                                  | last 2 versions                                                                                                                                              | last 2 versions                                                                                                                                          | last 2 versions                                                                                                                                          |
 
 ## Contributing
 
@@ -158,6 +162,8 @@ pnpm install        # install dependencies
 pnpm dev            # start docs dev server
 pnpm build          # build all packages
 pnpm test           # run tests
+pnpm test:accessibility  # run Playwright + axe accessibility checks
+pnpm test:visual    # run Playwright visual regression checks
 pnpm lint           # lint code
 ```
 

diff --git a/apps/docs/guides/cli.md b/apps/docs/guides/cli.md
@@ -18,7 +18,7 @@ npm install -g @tiny-design/cli
 ## Quick Start
 
 ```bash
-tiny-design list                        # List all 80+ components by category
+tiny-design list                        # List React component metadata by category
 tiny-design info Button                 # Component props, types, defaults
 tiny-design doc Select                  # Full markdown documentation
 tiny-design demo Button Type            # Runnable demo source code
@@ -39,7 +39,7 @@ tiny-design usage ./src                 # Scan project for import stats
 | `tiny-design doc <component>`         | Full markdown documentation for a component.                                                                                  |
 | `tiny-design demo <component> [name]` | Demo source code (TSX). Lists available demos if no name is given.                                                            |
 | `tiny-design token [category]`        | Design token values. Categories: colors, typography, spacing, breakpoints, shadows.                                           |
-| `tiny-design icon [search]`           | List all 240+ icons or search by name.                                                                                        |
+| `tiny-design icon [search]`           | List all 243 icons or search by name.                                                                                         |
 
 ### Project Analysis
 

diff --git a/apps/docs/guides/cli.zh_CN.md b/apps/docs/guides/cli.zh_CN.md
@@ -18,7 +18,7 @@ npm install -g @tiny-design/cli
 ## 快速开始
 
 ```bash
-tiny-design list                        # 列出所有 80+ 个组件（按分类）
+tiny-design list                        # 按分类列出 React 组件元数据
 tiny-design info Button                 # 组件属性、类型、默认值
 tiny-design doc Select                  # 完整的 Markdown 文档
 tiny-design demo Button Type            # 可运行的演示源代码
@@ -39,7 +39,7 @@ tiny-design usage ./src                 # 扫描项目中的导入统计
 | `tiny-design doc <component>`         | 组件的完整 Markdown 文档。                                                 |
 | `tiny-design demo <component> [name]` | 演示源代码（TSX）。未指定名称时列出可用演示。                              |
 | `tiny-design token [category]`        | 设计令牌值。分类：colors、typography、spacing、breakpoints、shadows。      |
-| `tiny-design icon [search]`           | 列出所有 240+ 个图标或按名称搜索。                                         |
+| `tiny-design icon [search]`           | 列出全部 243 个图标或按名称搜索。                                          |
 
 ### 项目分析
 

diff --git a/apps/docs/guides/mcp-server.md b/apps/docs/guides/mcp-server.md
@@ -12,11 +12,11 @@ The Model Context Protocol (MCP) is an open standard that lets AI assistants con
 
 | Tool | Description |
 |------|-------------|
-| `list_components` | List all 80+ components. Filter by category: Foundation, Layout, Navigation, Data Display, Form, Feedback, Miscellany. |
+| `list_components` | List extracted React component metadata. Filter by category: Foundation, Layout, Navigation, Data Display, Form, Feedback, Miscellany. |
 | `get_component_props` | Get the full props interface for a component — types, required flags, descriptions. |
 | `get_component_example` | Get usage examples (demo code) for a component. |
 | `get_design_tokens` | Get v2 design tokens from the token registry — colors, typography, spacing, breakpoints, shadows. |
-| `list_icons` | List all 240+ icon names. Filter by search term. |
+| `list_icons` | List all 243 icon names. Filter by search term. |
 | `get_icon` | Get details and usage example for a specific icon. |
 
 ## Setup

diff --git a/apps/docs/guides/mcp-server.zh_CN.md b/apps/docs/guides/mcp-server.zh_CN.md
@@ -12,11 +12,11 @@ Model Context Protocol（MCP）是一个开放标准，允许 AI 助手连接外
 
 | 工具 | 描述 |
 |------|------|
-| `list_components` | 列出所有 80+ 个组件。可按分类筛选：基础、布局、导航、数据展示、表单、反馈、其他。 |
+| `list_components` | 列出提取的 React 组件元数据。可按分类筛选：基础、布局、导航、数据展示、表单、反馈、其他。 |
 | `get_component_props` | 获取组件的完整属性接口——类型、是否必填、描述。 |
 | `get_component_example` | 获取组件的使用示例（演示代码）。 |
 | `get_design_tokens` | 获取设计令牌（SCSS 变量）——颜色、排版、间距、断点、阴影。 |
-| `list_icons` | 列出所有 240+ 个图标名称。支持搜索过滤。 |
+| `list_icons` | 列出全部 243 个图标名称。支持搜索过滤。 |
 | `get_icon` | 获取特定图标的详细信息和使用示例。 |
 
 ## 配置

diff --git a/apps/docs/public/llms.txt b/apps/docs/public/llms.txt
@@ -2,7 +2,7 @@
 
 > A friendly UI component set for React
 
-Tiny Design (`@tiny-design/react`) is a comprehensive React UI component library with 80+ components, built with TypeScript, supporting theming via `ConfigProvider` and design tokens.
+Tiny Design (`@tiny-design/react`) is a comprehensive React UI component library with 80+ exported React components, built with TypeScript, supporting theming via `ConfigProvider` and design tokens.
 
 - Docs: https://wangdicoder.github.io/tiny-design/
 - GitHub: https://github.com/wangdicoder/tiny-design

diff --git a/llms.txt b/llms.txt
@@ -2,7 +2,7 @@
 
 > A friendly UI component set for React
 
-Tiny Design (`@tiny-design/react`) is a comprehensive React UI component library with 80+ components, built with TypeScript, supporting theming via `ConfigProvider` and design tokens.
+Tiny Design (`@tiny-design/react`) is a comprehensive React UI component library with 80+ exported React components, built with TypeScript, supporting theming via `ConfigProvider` and design tokens.
 
 - Docs: https://wangdicoder.github.io/tiny-design/
 - GitHub: https://github.com/wangdicoder/tiny-design

diff --git a/packages/cli/README.md b/packages/cli/README.md
@@ -11,7 +11,7 @@ npm install -g @tiny-design/cli
 ## Quick Start
 
 ```bash
-tiny-design list                        # List all 80+ components by category
+tiny-design list                        # List extracted React component metadata by category
 tiny-design info Button                 # Component props, types, defaults
 tiny-design doc Select                  # Full markdown documentation
 tiny-design demo Button Type            # Runnable demo source code
@@ -25,29 +25,29 @@ tiny-design usage ./src                 # Scan project for import stats
 
 ### Knowledge Query
 
-| Command | Description |
-|---------|-------------|
-| `tiny-design list [category]` | List all components grouped by category |
-| `tiny-design info <component>` | Props table with types, required flags, default values |
-| `tiny-design doc <component>` | Full markdown documentation |
-| `tiny-design demo <component> [name]` | Demo source code (TSX) |
-| `tiny-design token [category]` | Design token values (colors, typography, spacing, breakpoints, shadows) |
-| `tiny-design icon [search]` | List all 240+ icons or search by name |
+| Command                               | Description                                                             |
+| ------------------------------------- | ----------------------------------------------------------------------- |
+| `tiny-design list [category]`         | List all components grouped by category                                 |
+| `tiny-design info <component>`        | Props table with types, required flags, default values                  |
+| `tiny-design doc <component>`         | Full markdown documentation                                             |
+| `tiny-design demo <component> [name]` | Demo source code (TSX)                                                  |
+| `tiny-design token [category]`        | Design token values (colors, typography, spacing, breakpoints, shadows) |
+| `tiny-design icon [search]`           | List all 243 icons or search by name                                    |
 
 ### Project Analysis
 
-| Command | Description |
-|---------|-------------|
-| `tiny-design doctor` | Diagnose project setup (React version, peer deps, duplicates) |
-| `tiny-design usage [dir]` | Scan for `@tiny-design/react` import statistics |
+| Command                   | Description                                                   |
+| ------------------------- | ------------------------------------------------------------- |
+| `tiny-design doctor`      | Diagnose project setup (React version, peer deps, duplicates) |
+| `tiny-design usage [dir]` | Scan for `@tiny-design/react` import statistics               |
 
 ### Global Flags
 
-| Flag | Description | Default |
-|------|-------------|---------|
-| `--format json\|text\|markdown` | Output format | `text` |
-| `--lang en\|zh` | Output language | `en` |
-| `--detail` | Include extended information | `false` |
+| Flag                            | Description                  | Default |
+| ------------------------------- | ---------------------------- | ------- |
+| `--format json\|text\|markdown` | Output format                | `text`  |
+| `--lang en\|zh`                 | Output language              | `en`    |
+| `--detail`                      | Include extended information | `false` |
 
 ## Usage with AI Tools
 

diff --git a/packages/icons/README.md b/packages/icons/README.md
@@ -1,6 +1,6 @@
 # @tiny-design/icons
 
-SVG icon components for React, part of the Tiny Design system. Includes 242 icons auto-generated from the icon font.
+SVG icon components for React, part of the Tiny Design system. Includes 243 icons auto-generated from the icon font.
 
 ## Install
 
@@ -32,10 +32,10 @@ function App() {
 
 All icons accept the following props (plus any standard SVG attributes):
 
-| Prop | Type | Default | Description |
-| --- | --- | --- | --- |
-| `size` | `string \| number` | `'1em'` | Width and height of the icon |
-| `color` | `string` | `'currentColor'` | Fill color |
+| Prop    | Type               | Default          | Description                  |
+| ------- | ------------------ | ---------------- | ---------------------------- |
+| `size`  | `string \| number` | `'1em'`          | Width and height of the icon |
+| `color` | `string`           | `'currentColor'` | Fill color                   |
 
 ### Spinning Icons
 

diff --git a/packages/mcp/README.md b/packages/mcp/README.md
@@ -50,14 +50,14 @@ Add to your MCP client config:
 
 ## Available Tools
 
-| Tool | Description |
-|------|-------------|
-| `list_components` | List all 80+ components. Filter by category: Foundation, Layout, Navigation, Data Display, Form, Feedback, Miscellany. |
-| `get_component_props` | Get the full props interface for a component — types, required flags, descriptions. |
-| `get_component_example` | Get usage examples (demo code) for a component. |
-| `get_design_tokens` | Get v2 design tokens from the token registry — colors, typography, spacing, breakpoints, shadows. |
-| `list_icons` | List all 240+ icon names. Filter by search term. |
-| `get_icon` | Get details and usage example for a specific icon. |
+| Tool                    | Description                                                                                                                            |
+| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| `list_components`       | List extracted React component metadata. Filter by category: Foundation, Layout, Navigation, Data Display, Form, Feedback, Miscellany. |
+| `get_component_props`   | Get the full props interface for a component — types, required flags, descriptions.                                                    |
+| `get_component_example` | Get usage examples (demo code) for a component.                                                                                        |
+| `get_design_tokens`     | Get v2 design tokens from the token registry — colors, typography, spacing, breakpoints, shadows.                                      |
+| `list_icons`            | List all 243 icon names. Filter by search term.                                                                                        |
+| `get_icon`              | Get details and usage example for a specific icon.                                                                                     |
 
 ## Examples