diff --git a/docs/themes/guidelines.md b/docs/themes/guidelines.md
index b6a2eebb9e..b985b11e00 100644
--- a/docs/themes/guidelines.md
+++ b/docs/themes/guidelines.md
@@ -84,3 +84,7 @@ Accent color and brand colors which used for interactive components.
 ## Demo
 
 <PaletteDisplay />
+
+<script setup>
+import PaletteDisplay from '@source/.vuepress/components/PaletteDisplay.vue'
+</script>
diff --git a/docs/zh/themes/guidelines.md b/docs/zh/themes/guidelines.md
index 49a3c3624d..60e0179fba 100644
--- a/docs/zh/themes/guidelines.md
+++ b/docs/zh/themes/guidelines.md
@@ -84,3 +84,7 @@ icon: signpost
 ## 案例
 
 <PaletteDisplay />
+
+<script setup>
+import PaletteDisplay from '@source/.vuepress/components/PaletteDisplay.vue'
+</script>