diff --git a/docs/react/customize-theme.en-US.md b/docs/react/customize-theme.en-US.md
index 81159c4ad1..5e8a998f6a 100644
--- a/docs/react/customize-theme.en-US.md
+++ b/docs/react/customize-theme.en-US.md
@@ -31,36 +31,8 @@ When you need context information (such as the content configured by ConfigProvi
By modifying `token` property of `theme`, we can modify Design Token globally. Some tokens will affect other tokens. We call these tokens Seed Token.
-```sandpack
-const sandpackConfig = {
- autorun: true,
-};
-
-import { Button, ConfigProvider, Space } from 'antd';
-import React from 'react';
-
-const App: React.FC = () => (
-
-
-
-
-
-
-);
-
-export default App;
-```
+
+Customize Design Token
### Use Preset Algorithms
@@ -72,33 +44,8 @@ Themes with different styles can be quickly generated by modifying `algorithm`.
You can switch algorithms by modifying the `algorithm` property of `theme` in ConfigProvider.
-```sandpack
-const sandpackConfig = {
- dark: true,
-};
-
-import React from 'react';
-import { Button, ConfigProvider, Input, Space, theme } from 'antd';
-
-const App: React.FC = () => (
-
-
-
-
-
-
-);
-
-export default App;
-```
+
+Use Preset Algorithms
### Customize Component Token
@@ -112,99 +59,15 @@ By default, all component tokens can only override global token and will not be
In version `>= 5.8.0`, component tokens support the `algorithm` property, which can be used to enable algorithm or pass in other algorithms.
:::
-```sandpack
-import React from 'react';
-import { ConfigProvider, Button, Space, Input, Divider } from 'antd';
-
-const App: React.FC = () => (
- <>
-
-
-
Enable algorithm:
-
-
-
-
-
-
-
-
Disable algorithm:
-
-
-
-
-
-);
-
-export default App;
-```
+
+Customize Component Token
### Disable Motion
antd has built-in interaction animations to make enterprise-level pages more detailed. In some extreme scenarios, it may affect the performance of page interaction. If you need to turn off the animation, try setting `motion` of `token` to `false`:
-```sandpack
-import React from 'react';
-import { Checkbox, Col, ConfigProvider, Flex, Radio, Row, Switch } from 'antd';
-
-const App: React.FC = () => {
- const [checked, setChecked] = React.useState(false);
- const timerRef = React.useRef>();
- React.useEffect(() => {
- timerRef.current = setInterval(() => {
- setChecked((prev) => !prev);
- }, 500);
- return () => {
- if (timerRef.current) {
- clearInterval(timerRef.current);
- }
- };
- }, []);
-
- const nodes = (
-
- Checkbox
- Radio
-
-
- );
-
- return (
-
-
{nodes}
-
- {nodes}
-
-
- );
-};
-
-export default App;
-```
+
+Disable Motion
## Advanced
@@ -239,100 +102,22 @@ fs.writeFileSync('/path/to/somewhere', cssText);
In v5, dynamically switching themes is very simple for users, you can dynamically switch themes at any time through the `theme` property of `ConfigProvider` without any additional configuration.
-```sandpack
-import { Button, ConfigProvider, Space, Input, ColorPicker, Divider } from 'antd';
-import React from 'react';
-
-const App: React.FC = () => {
- const [primary, setPrimary] = React.useState('#1677ff');
-
- return (
- <>
- setPrimary(color.toHexString())} />
-
-
-
-
-
-
-
-
- );
-}
-
-export default App;
-```
+
+Switch Themes Dynamically
### Nested Theme
By nesting `ConfigProvider` you can apply local theme to some parts of your page. Design Tokens that have not been changed in the child theme will inherit the parent theme.
-```sandpack
-import React from 'react';
-import { Button, ConfigProvider, Space } from 'antd';
-
-const App: React.FC = () => (
-
-
-
-
-
-
-
-
-);
-
-export default App;
-```
+
+Nested Theme
### Consume Design Token
If you want to consume the Design Token under the current theme, we provide `useToken` hook to get Design Token.
-```sandpack
-import React from 'react';
-import { Button, theme } from 'antd';
-
-const { useToken } = theme;
-
-const App: React.FC = () => {
- const { token } = useToken();
-
- return (
-
- );
-};
-
-export default App;
-```
+
+使用 Design Token
### 静态消费（如 less）
diff --git a/docs/react/demo/component-token.md b/docs/react/demo/component-token.md
new file mode 100644
index 0000000000..2a4171fb29
--- /dev/null
+++ b/docs/react/demo/component-token.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+除了整体的 Design Token，各个组件也会开放自己的 Component Token 来实现针对组件的样式定制能力，不同的组件之间不会相互影响。同样地，也可以通过这种方式来覆盖组件的其他 Design Token。在 `>= 5.8.0` 版本中，组件变量支持传入 `algorithm` 属性，可以开启派生计算或者传入其他算法。
+
+## en-US
+
+In addition to the overall Design Token, each component also exposes its own Component Token to enable component-specific style customization capabilities, without mutual influence between different components. Similarly, you can also override other Design Tokens consumed by the component through this method. In version `>= 5.8.0`, the component token supports passing the `algorithm` property to enable derivative calculation or pass in other algorithms.
diff --git a/docs/react/demo/component-token.tsx b/docs/react/demo/component-token.tsx
new file mode 100644
index 0000000000..3e209d16a8
--- /dev/null
+++ b/docs/react/demo/component-token.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Button, ConfigProvider, Divider, Input, Space } from 'antd';
+
+const App: React.FC = () => (
+ <>
+
+
+
Algorithm Enabled:
+
+
+
+
+
+
+
+
Algorithm Disabled:
+
+
+
+
+
+);
+
+export default App;
diff --git a/docs/react/demo/disable-motion.md b/docs/react/demo/disable-motion.md
new file mode 100644
index 0000000000..fff31fe2f7
--- /dev/null
+++ b/docs/react/demo/disable-motion.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+antd 默认内置了一些组件交互动效让企业级页面更加富有细节，在一些极端场景可能会影响页面交互性能，如需关闭动画可以 `token` 中的 `motion` 修改为 `false`。
+
+## en-US
+
+Ant Design includes some built-in component interaction animations to make enterprise pages more detailed. In some extreme scenarios, this may affect page interaction performance. If you need to turn off animations, you can set `motion` in `token` to `false`.
diff --git a/docs/react/demo/disable-motion.tsx b/docs/react/demo/disable-motion.tsx
new file mode 100644
index 0000000000..476bfd7463
--- /dev/null
+++ b/docs/react/demo/disable-motion.tsx
@@ -0,0 +1,37 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Checkbox, Col, ConfigProvider, Flex, Radio, Row, Switch } from 'antd';
+
+const App: React.FC = () => {
+ const [checked, setChecked] = useState(false);
+ const timerRef = useRef>(null);
+
+ useEffect(() => {
+ timerRef.current = setInterval(() => {
+ setChecked((prev) => !prev);
+ }, 500);
+ return () => {
+ if (timerRef.current) {
+ clearInterval(timerRef.current);
+ }
+ };
+ }, []);
+
+ const nodes = (
+
+ Checkbox
+ Radio
+
+
+ );
+
+ return (
+
+
{nodes}
+
+ {nodes}
+
+
+ );
+};
+
+export default App;
diff --git a/docs/react/demo/dynamic-theme.md b/docs/react/demo/dynamic-theme.md
new file mode 100644
index 0000000000..233a2313e5
--- /dev/null
+++ b/docs/react/demo/dynamic-theme.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+在 v5 中，动态切换主题对用户来说是非常简单的，你可以在任何时候通过 `ConfigProvider` 的 `theme` 属性来动态切换主题，而不需要任何额外配置。
+
+## en-US
+
+In v5, dynamic theme switching is very simple for users. You can dynamically switch themes through the `theme` property of `ConfigProvider` at any time without any additional configuration.
diff --git a/docs/react/demo/dynamic-theme.tsx b/docs/react/demo/dynamic-theme.tsx
new file mode 100644
index 0000000000..eee55609bc
--- /dev/null
+++ b/docs/react/demo/dynamic-theme.tsx
@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import { Button, ColorPicker, ConfigProvider, Divider, Input, Space } from 'antd';
+
+const App: React.FC = () => {
+ const [primary, setPrimary] = useState('#1677ff');
+
+ return (
+ <>
+ setPrimary(color.toHexString())} />
+
+
+
+
+
+
+
+
+ );
+};
+
+export default App;
diff --git a/docs/react/demo/first-example.md b/docs/react/demo/first-example.md
new file mode 100644
index 0000000000..1558feca7e
--- /dev/null
+++ b/docs/react/demo/first-example.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+这是一个最简单的 Ant Design 组件的在线 codesandbox 演示，展示 Ant Design React 的用法。
+
+## en-US
+
+Here is a simple online codesandbox demo to show the usage of Ant Design React.
diff --git a/docs/react/demo/first-example.tsx b/docs/react/demo/first-example.tsx
new file mode 100644
index 0000000000..34c8e441d5
--- /dev/null
+++ b/docs/react/demo/first-example.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Button, DatePicker, Space, version } from 'antd';
+
+const App = () => (
+
+
antd version: {version}
+
+
+
+
+
+);
+
+export default App;
diff --git a/docs/react/demo/local-theme.md b/docs/react/demo/local-theme.md
new file mode 100644
index 0000000000..78625d51a2
--- /dev/null
+++ b/docs/react/demo/local-theme.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+可以嵌套使用 `ConfigProvider` 来实现局部主题的更换。在子主题中未被改变的 Design Token 将会继承父主题。
+
+## en-US
+
+You can nest `ConfigProvider` to achieve local theme changes. Design Tokens that have not been changed in the sub-theme will inherit from the parent theme.
diff --git a/docs/react/demo/local-theme.tsx b/docs/react/demo/local-theme.tsx
new file mode 100644
index 0000000000..b3d056b3ae
--- /dev/null
+++ b/docs/react/demo/local-theme.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Button, ConfigProvider, Space } from 'antd';
+
+const App: React.FC = () => (
+
+
+
+
+
+
+
+
+);
+
+export default App;
diff --git a/docs/react/demo/modify-theme-token.md b/docs/react/demo/modify-theme-token.md
new file mode 100644
index 0000000000..4c58979195
--- /dev/null
+++ b/docs/react/demo/modify-theme-token.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+通过 `theme` 中的 `token` 属性，可以修改一些主题变量。部分主题变量会引起其他主题变量的变化，我们把这些主题变量称为 Seed Token。
+
+## en-US
+
+You can modify some theme variables through the `token` property in `theme`. Some theme variables will cause changes to other theme variables, which we call Seed Tokens.
diff --git a/docs/react/demo/modify-theme-token.tsx b/docs/react/demo/modify-theme-token.tsx
new file mode 100644
index 0000000000..6665e77cc7
--- /dev/null
+++ b/docs/react/demo/modify-theme-token.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Button, ConfigProvider, Space } from 'antd';
+
+const App: React.FC = () => (
+
+
+
+
+
+
+);
+
+export default App;
diff --git a/docs/react/demo/preset-algorithm.md b/docs/react/demo/preset-algorithm.md
new file mode 100644
index 0000000000..4fa5e898a2
--- /dev/null
+++ b/docs/react/demo/preset-algorithm.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+通过修改算法可以快速生成风格迥异的主题，我们默认提供三套预设算法：默认算法 `theme.defaultAlgorithm`、暗色算法 `theme.darkAlgorithm` 和紧凑算法 `theme.compactAlgorithm`。你可以通过 `theme` 中的 `algorithm` 属性来切换算法，并且支持配置多种算法，将会依次生效。
+
+## en-US
+
+You can quickly generate distinct themes by modifying algorithms. We provide three preset algorithms by default: `theme.defaultAlgorithm`, `theme.darkAlgorithm`, and `theme.compactAlgorithm`. You can switch algorithms through the `algorithm` property in `theme`, and multiple algorithms can be configured, which will take effect in order.
diff --git a/docs/react/demo/preset-algorithm.tsx b/docs/react/demo/preset-algorithm.tsx
new file mode 100644
index 0000000000..30b19184b7
--- /dev/null
+++ b/docs/react/demo/preset-algorithm.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Button, ConfigProvider, Input, Space, theme } from 'antd';
+
+const App: React.FC = () => (
+
+
+
+
+
+
+);
+
+export default App;
diff --git a/docs/react/demo/use-token.md b/docs/react/demo/use-token.md
new file mode 100644
index 0000000000..645c056e41
--- /dev/null
+++ b/docs/react/demo/use-token.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+如果你希望使用当前主题下的 Design Token，我们提供了 `useToken` 这个 hook 来获取 Design Token。
+
+## en-US
+
+If you want to use the Design Token of the current theme, we provide a `useToken` hook to get it.
diff --git a/docs/react/demo/use-token.tsx b/docs/react/demo/use-token.tsx
new file mode 100644
index 0000000000..be321c3c12
--- /dev/null
+++ b/docs/react/demo/use-token.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { theme } from 'antd';
+
+const { useToken } = theme;
+
+const App: React.FC = () => {
+ const { token } = useToken();
+
+ return (
+
+ Use Design Token
+
+ );
+};
+
+export default App;
diff --git a/docs/react/getting-started.en-US.md b/docs/react/getting-started.en-US.md
index 60bbeb8e3b..02d3dfd061 100755
--- a/docs/react/getting-started.en-US.md
+++ b/docs/react/getting-started.en-US.md
@@ -18,26 +18,8 @@ Finally, if you are working in a local development environment, please refer to
Here is a simple online codesandbox demo of an Ant Design component to show the usage of Ant Design React.
-```sandpack
-const sandpackConfig = {
- autorun: true,
-};
-
-import React from 'react';
-import { Button, Space, DatePicker, version } from 'antd';
-
-const App = () => (
-
-
antd version: {version}
-
-
-
-
-
-);
-
-export default App;
-```
+
+First Example
Follow the steps below to play around with Ant Design yourself:
diff --git a/docs/react/getting-started.zh-CN.md b/docs/react/getting-started.zh-CN.md
index da1bcb90a4..0137b87252 100755
--- a/docs/react/getting-started.zh-CN.md
+++ b/docs/react/getting-started.zh-CN.md
@@ -16,26 +16,8 @@ Ant Design React 致力于提供给程序员**愉悦**的开发体验。
这是一个最简单的 Ant Design 组件的在线 codesandbox 演示。
-```sandpack
-const sandpackConfig = {
- autorun: true,
-};
-
-import React from 'react';
-import { Button, Space, DatePicker, version } from 'antd';
-
-const App = () => (
-