1 files changed, 29 insertions, 0 deletions
diff --git a/src/demos/ProvidersDemo.tsx b/src/demos/ProvidersDemo.tsx
new file mode 100644
index 0000000..48f5a9f
--- /dev/null
+++ b/src/demos/ProvidersDemo.tsx
@@ -0,0 +1,29 @@
+import { Button } from '@astryxdesign/core/Button'
+import { HStack } from '@astryxdesign/core/HStack'
+import { Link } from '@astryxdesign/core/Link'
+import { Text } from '@astryxdesign/core/Text'
+import { VStack } from '@astryxdesign/core/VStack'
+import { useThemeMode } from '../theme/useThemeMode'
+
+export function ProvidersDemo() {
+  const { mode, toggleMode } = useThemeMode()
+  const nextModeLabel = mode === 'light' ? '切换到深色主题' : '切换到浅色主题'
+
+  return (
+    <VStack gap={3}>
+      <Text type="body" color="secondary" as="p">
+        当前页面已经由 Theme、LinkProvider 和 InternationalizationProvider
+        包裹。切换主题或点击站内链接即可看到实际效果。
+      </Text>
+      <HStack gap={3} wrap="wrap" vAlign="center">
+        <Button label={nextModeLabel} variant="primary" onClick={toggleMode} />
+        <Link href="/about" isStandalone>
+          通过 LinkProvider 打开的站内链接
+        </Link>
+      </HStack>
+      <Text type="supporting" size="sm">
+        Astryx 内置文案同样是中文，例如「必填」「关闭」「跳至内容」。
+      </Text>
+    </VStack>
+  )
+}