diff --git a/app/components/mdx.tsx b/app/components/mdx.tsx
index 5f155dc..3a8674b 100644
--- a/app/components/mdx.tsx
+++ b/app/components/mdx.tsx
@@ -84,6 +84,13 @@ const components = {
   a: CustomLink,
   Tabs,
   TabItem,
+  // 代码演示组件
+  Demo: ({ children }: { children: React.ReactNode }) => (
+    <div className="my-6 rounded-lg border bg-card p-6">
+      <div className="mb-4 text-sm font-medium text-muted-foreground">演示</div>
+      {children}
+    </div>
+  ),
 }
 
 export function CustomMDX(props) {
diff --git a/content/changelog/demo-component.md b/content/changelog/demo-component.md
new file mode 100644
index 0000000..5a0c8fe
--- /dev/null
+++ b/content/changelog/demo-component.md
@@ -0,0 +1,8 @@
+# 新增 Demo 组件
+
+<Demo>
+  <div className="text-center p-6 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950 dark:to-indigo-950 rounded-lg">
+    <h3 className="text-xl font-semibold mb-2">使用 Demo 组件</h3>
+    <p className="text-muted-foreground mb-4">创建更加生动和交互式的内容</p>
+  </div>
+</Demo>