diff --git a/docs/guide/demos/tokens.ts b/docs/guide/demos/tokens.ts
index a80641c06..ff1838b56 100644
--- a/docs/guide/demos/tokens.ts
+++ b/docs/guide/demos/tokens.ts
@@ -1,7 +1,15 @@
 import type { Web3ThemeConfig } from '@ant-design/web3';
 import { theme } from 'antd';
 
-export type ThemeValue = 'default' | 'violet' | 'dark' | 'green' | 'pink' | 'retro' | 'win95';
+export type ThemeValue =
+  | 'default'
+  | 'violet'
+  | 'dark'
+  | 'green'
+  | 'pink'
+  | 'retro'
+  | 'win95'
+  | 'material';
 
 export const customToken: Web3ThemeConfig = {
   token: {
@@ -160,6 +168,37 @@ export const themeList: ThemeSetting[] = [
       },
     },
   },
+  {
+    color: '#6750A4',
+    value: 'material',
+    name: 'Material Design 3',
+    buttonType: 'primary',
+    token: {
+      token: {
+        colorPrimary: '#6750a4',
+        colorBorderBg: '',
+        colorLink: '#6750a4',
+        colorBgBase: '#fdfbff',
+        colorBgContainer: '#fdfbff',
+        colorBgMask: 'rgba(0, 0, 0, 0.32)',
+        controlHeight: 40,
+      },
+      components: {
+        Button: {
+          colorBorder: 'transparent',
+          colorText: '#6750a4',
+          colorPrimaryBg: '#6750a4',
+          primaryShadow: 'none',
+          dangerShadow: 'none',
+          defaultShadow: 'none',
+        },
+        Modal: {
+          contentBg: '#fffbfe',
+          boxShadow: 'none',
+        },
+      },
+    },
+  },
   {
     value: 'green',
     name: 'Forest green',
diff --git a/docs/guide/demos/try-it-out/index.tsx b/docs/guide/demos/try-it-out/index.tsx
index f0b06dc7d..89fbc7756 100644
--- a/docs/guide/demos/try-it-out/index.tsx
+++ b/docs/guide/demos/try-it-out/index.tsx
@@ -192,7 +192,7 @@ const App: React.FC = () => {
                   }}
                   defaultValue={defaultRadius}
                   min={0}
-                  max={16}
+                  max={24}
                   onChange={setRadius}
                 />
               </Space>