diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index b57d4a0..f0279f7 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -1,6 +1,14 @@
 import { defineConfig } from 'vitepress'
 import UnoCSS from 'unocss/vite'
-import { presetUno, presetWind, presetTypography } from 'unocss'
+import { colors } from '@fmhy/colors'
+import { presetUno, presetWind } from 'unocss'
+
+const safelist = Object.entries(colors).flatMap(([group, shades]) =>
+  Object.keys(shades).flatMap((shade) => [
+    `text-${group}-${shade}`,
+    `bg-${group}-${shade}`
+  ])
+)
 
 export default defineConfig({
   title: 'Design System',
@@ -8,7 +16,12 @@ export default defineConfig({
   cleanUrls: true,
   vite: {
     plugins: [
-      UnoCSS({ presets: [presetUno(), presetWind(), presetTypography()] })
+      // @ts-expect-error
+      UnoCSS({
+        theme: { colors: colors },
+        safelist,
+        presets: [presetUno(), presetWind()]
+      })
     ]
   },
   themeConfig: {
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 2146cbf..04560ee 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,7 +1,7 @@
-// https://vitepress.dev/guide/custom-theme
 import { h } from 'vue'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
+import Components from '@fmhy/components'
 import './style.css'
 import 'uno.css'
 
@@ -13,6 +13,6 @@ export default {
     })
   },
   enhanceApp({ app, router, siteData }) {
-    // ...
+    app.use(Components)
   }
 } satisfies Theme
diff --git a/docs/components.md b/docs/components.md
new file mode 100644
index 0000000..fc36ab8
--- /dev/null
+++ b/docs/components.md
@@ -0,0 +1,6 @@
+# Components
+
+## `GradientCard`
+
+<GradientCard theme="cerise" title="title" description="Lorem ipsum dolor sit amet, qui minim labore
+adipisicing minim sint cillum sint consectetur cupidatat." tag="tag or link" />
diff --git a/docs/index.md b/docs/index.md
index 6312af5..5ed86d6 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -11,6 +11,6 @@ hero:
       text: Colors
       link: /colors
     - theme: alt
-      text: API Examples
-      link: /api-examples
+      text: Components
+      link: /components
 ---
diff --git a/docs/markdown-examples.md b/docs/markdown-examples.md
deleted file mode 100644
index 6d56882..0000000
--- a/docs/markdown-examples.md
+++ /dev/null
@@ -1,7 +0,0 @@
-<div class="border border-color-white">
-
-<div style="box-shadow: 0 10px 40px -12px rgba(16,24,40,.1)" class="rounded-2xl h-96 border border-amber overflow-hidden flex flex-col relative text-color bg-zinc-900"><div class="p-4 sticky top-0 z-10"><div class="flex items-center gap-1.5"><div class="font-medium" style="color: rgb(241, 247, 253);">Meow</div></div></div><div class="absolute top-1/3 -left-32 -translate-y-1/2 rounded-full w-80 h-80 blur-3xl mix-blend" style="background-color: rgb(58, 105, 187);"></div><div class="absolute -top-56 left-1/2 -translate-x-1/2 rounded-full w-96 h-96 blur-3xl mix-blend" style="background-color: rgb(68, 125, 204);"></div><div class="absolute top-36 left-6"><div class="flex items-start"><div class="text-6xl font-normal tracking-tighter text-color" style="color: rgb(241, 247, 253);">180°</div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-8 h-8 ml-3" style="color: rgb(201, 224, 244);"><path fill-rule="evenodd" d="M5.22 14.78a.75.75 0 001.06 0l7.22-7.22v5.69a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75h-7.5a.75.75 0 000 1.5h5.69l-7.22 7.22a.75.75 0 000 1.06z" clip-rule="evenodd"></path></svg></div><div class="mt-4 text-color-muted" style="color: rgb(241, 247, 253);">Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</div></div></div>
-
-<div class="card-shadow border p-4 rounded-xl col-span-3" style="background-color: rgb(32, 46, 75); border-color: rgb(53, 86, 152);"><div class="inline-flex items-start"><div class="flex items-center gap-3"><div><div class="w-7 h-7 rounded-full flex items-center justify-center" style="background-color: rgb(120, 178, 226);"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4" style="color: rgb(47, 73, 121);"><path d="M10.618 10.26c-.361.223-.618.598-.618 1.022 0 .226-.142.43-.36.49A6.006 6.006 0 0 1 8 12c-.569 0-1.12-.08-1.64-.227a.504.504 0 0 1-.36-.491c0-.424-.257-.799-.618-1.021a5 5 0 1 1 5.235 0ZM6.867 13.415a.75.75 0 1 0-.225 1.483 9.065 9.065 0 0 0 2.716 0 .75.75 0 1 0-.225-1.483 7.563 7.563 0 0 1-2.266 0Z"></path></svg></div></div><div class="text-color">Make sure you save your custom color scale.</div></div></div></div>
-
-</div>
diff --git a/docs/package.json b/docs/package.json
index 3e89cf8..7c3aca3 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,19 +1,20 @@
 {
-	"name": "@fmhy-monorepo/docs",
-	"version": "1.0.0",
-	"private": true,
-	"type": "module",
-	"scripts": {
-		"build": "vitepress build",
-		"dev": "vitepress dev",
-		"format": "prettier --write --cache .",
-		"preview": "vitepress preview"
-	},
-	"dependencies": {
-		"@fmhy/colors": "workspace:^",
-		"sass": "^1.71.1",
-		"unocss": "^0.58.5",
-		"vitepress": "1.0.0-rc.45",
-		"vue": "^3.4.21"
-	}
+  "name": "@fmhy-monorepo/docs",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vitepress build",
+    "dev": "vitepress dev",
+    "format": "prettier --write --cache *.{md,vue,ts}",
+    "preview": "vitepress preview"
+  },
+  "dependencies": {
+    "@fmhy/colors": "workspace:^",
+    "@fmhy/components": "workspace:^",
+    "sass": "^1.71.1",
+    "unocss": "^0.58.5",
+    "vitepress": "1.0.0-rc.45",
+    "vue": "^3.4.21"
+  }
 }