diff --git a/components/scroll-area/ScrollArea.vue b/components/scroll-area/ScrollArea.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a203d9c9a29a0eb61438b3428833e3e83a2cb1a8
--- /dev/null
+++ b/components/scroll-area/ScrollArea.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import {
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+  type ScrollAreaRootProps,
+  ScrollAreaViewport,
+} from 'radix-vue'
+
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
+    <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollAreaScrollBar />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>
diff --git a/components/scroll-area/ScrollBar.vue b/components/scroll-area/ScrollBar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..02bb30bdcbeddb8dc53472d84bb65339c079feaf
--- /dev/null
+++ b/components/scroll-area/ScrollBar.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
+  orientation: 'vertical',
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ScrollAreaScrollbar
+    v-bind="delegatedProps"
+    :class="
+      cn('flex touch-none select-none transition-colors',
+         orientation === 'vertical'
+           && 'h-full w-2.5 border-l border-l-transparent p-px',
+         orientation === 'horizontal'
+           && 'h-2.5 flex-col border-t border-t-transparent p-px',
+         props.class)"
+  >
+    <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaScrollbar>
+</template>
diff --git a/components/scroll-area/index.ts b/components/scroll-area/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2bd4fae5d9bd96dec9c1b0ceff2cb830b30995ed
--- /dev/null
+++ b/components/scroll-area/index.ts
@@ -0,0 +1,2 @@
+export { default as ScrollArea } from './ScrollArea.vue'
+export { default as ScrollBar } from './ScrollBar.vue'
diff --git a/package-lock.json b/package-lock.json
index e15204e595069038e2b9a3e4252744c9d84632bd..3835f5107b284068e2e9055d388479b3f5909bbe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,10 +18,13 @@
         "@vite-pwa/nuxt": "^0.7.0",
         "@vueuse/nuxt": "^10.9.0",
         "chart.js": "^4.4.3",
+        "clsx": "^2.1.1",
         "highlight.js": "^11.9.0",
         "markdown-it": "^14.1.0",
         "nuxt": "^3.11.2",
         "pinia": "^2.1.7",
+        "radix-vue": "^1.8.3",
+        "tailwind-merge": "^2.3.0",
         "vue": "^3.4.27",
         "vue-router": "^4.3.2"
       },
@@ -3067,7 +3070,6 @@
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.1.tgz",
       "integrity": "sha512-42UH54oPZHPdRHdw6BgoBD6cg/eVTmVrFcgeRDM3jbO7uxSoipVcmcIGFcA5jmOHO5apcyvBhkSKES3fQJnu7A==",
-      "peer": true,
       "dependencies": {
         "@floating-ui/utils": "^0.2.0"
       }
@@ -3084,8 +3086,51 @@
     "node_modules/@floating-ui/utils": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz",
-      "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==",
-      "peer": true
+      "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw=="
+    },
+    "node_modules/@floating-ui/vue": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.0.6.tgz",
+      "integrity": "sha512-EdrOljjkpkkqZnrpqUcPoz9NvHxuTjUtSInh6GMv3+Mcy+giY2cE2pHh9rpacRcZ2eMSCxel9jWkWXTjLmY55w==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.6.1",
+        "@floating-ui/utils": "^0.2.1",
+        "vue-demi": ">=0.13.0"
+      }
+    },
+    "node_modules/@floating-ui/vue/node_modules/@floating-ui/dom": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz",
+      "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==",
+      "dependencies": {
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "node_modules/@floating-ui/vue/node_modules/vue-demi": {
+      "version": "0.14.8",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
+      "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
     },
     "node_modules/@formkit/auto-animate": {
       "version": "0.8.2",
@@ -3230,6 +3275,22 @@
         "vue": ">=3"
       }
     },
+    "node_modules/@internationalized/date": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.4.tgz",
+      "integrity": "sha512-qoVJVro+O0rBaw+8HPjUB1iH8Ihf8oziEnqMnvhJUSuVIrHOuZ6eNLHNvzXJKUvAtaDiqMnRlg8Z2mgh09BlUw==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/number": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.5.3.tgz",
+      "integrity": "sha512-rd1wA3ebzlp0Mehj5YTuTI50AQEx80gWFyHcQu+u91/5NgdwBecO8BH6ipPfE+lmQ9d63vpB3H9SHoIUiupllw==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
     "node_modules/@intlify/bundle-utils": {
       "version": "7.5.1",
       "resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-7.5.1.tgz",
@@ -5795,6 +5856,14 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.11",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.11.tgz",
+      "integrity": "sha512-YNlnKRWF2sVojTpIyzwou9XoTNbzbzONwRhOoniEioF1AtaitTvVZblaQRrAzChWQ1bLYyYSWzM18y4WwgzJ+A==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@tailwindcss/aspect-ratio": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.2.tgz",
@@ -7661,6 +7730,17 @@
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/array-buffer-byte-length": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
@@ -8658,6 +8738,14 @@
         "node": ">=12"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/cluster-key-slot": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/cluster-key-slot/-/cluster-key-slot-1.1.2.tgz",
@@ -16888,6 +16976,36 @@
       "resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz",
       "integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag=="
     },
+    "node_modules/radix-vue": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/radix-vue/-/radix-vue-1.8.3.tgz",
+      "integrity": "sha512-WPgvEz0i5XKjwahhffD2QPLiOTthTfecoVjwq4l3i3EWBX2tUp4Vw3n3OLGf3S18FN/WfEgD3GIxYfsrnDutqw==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.6.5",
+        "@floating-ui/vue": "^1.0.6",
+        "@internationalized/date": "^3.5.4",
+        "@internationalized/number": "^3.5.3",
+        "@tanstack/vue-virtual": "^3.5.0",
+        "@vueuse/core": "^10.5.0",
+        "@vueuse/shared": "^10.5.0",
+        "aria-hidden": "^1.2.3",
+        "defu": "^6.1.4",
+        "fast-deep-equal": "^3.1.3",
+        "nanoid": "^5.0.6"
+      },
+      "peerDependencies": {
+        "vue": ">= 3.2.0"
+      }
+    },
+    "node_modules/radix-vue/node_modules/@floating-ui/dom": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz",
+      "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==",
+      "dependencies": {
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
     "node_modules/radix3": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/radix3/-/radix3-1.1.2.tgz",
@@ -19295,8 +19413,7 @@
     "node_modules/tslib": {
       "version": "2.6.3",
       "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.6.3.tgz",
-      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
-      "dev": true
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ=="
     },
     "node_modules/tsscmp": {
       "version": "1.0.6",
@@ -23257,7 +23374,6 @@
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.1.tgz",
       "integrity": "sha512-42UH54oPZHPdRHdw6BgoBD6cg/eVTmVrFcgeRDM3jbO7uxSoipVcmcIGFcA5jmOHO5apcyvBhkSKES3fQJnu7A==",
-      "peer": true,
       "requires": {
         "@floating-ui/utils": "^0.2.0"
       }
@@ -23274,8 +23390,34 @@
     "@floating-ui/utils": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz",
-      "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==",
-      "peer": true
+      "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw=="
+    },
+    "@floating-ui/vue": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.0.6.tgz",
+      "integrity": "sha512-EdrOljjkpkkqZnrpqUcPoz9NvHxuTjUtSInh6GMv3+Mcy+giY2cE2pHh9rpacRcZ2eMSCxel9jWkWXTjLmY55w==",
+      "requires": {
+        "@floating-ui/dom": "^1.6.1",
+        "@floating-ui/utils": "^0.2.1",
+        "vue-demi": ">=0.13.0"
+      },
+      "dependencies": {
+        "@floating-ui/dom": {
+          "version": "1.6.5",
+          "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz",
+          "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==",
+          "requires": {
+            "@floating-ui/core": "^1.0.0",
+            "@floating-ui/utils": "^0.2.0"
+          }
+        },
+        "vue-demi": {
+          "version": "0.14.8",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
+          "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
+          "requires": {}
+        }
+      }
     },
     "@formkit/auto-animate": {
       "version": "0.8.2",
@@ -23396,6 +23538,22 @@
         "@iconify/types": "^2.0.0"
       }
     },
+    "@internationalized/date": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.4.tgz",
+      "integrity": "sha512-qoVJVro+O0rBaw+8HPjUB1iH8Ihf8oziEnqMnvhJUSuVIrHOuZ6eNLHNvzXJKUvAtaDiqMnRlg8Z2mgh09BlUw==",
+      "requires": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "@internationalized/number": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.5.3.tgz",
+      "integrity": "sha512-rd1wA3ebzlp0Mehj5YTuTI50AQEx80gWFyHcQu+u91/5NgdwBecO8BH6ipPfE+lmQ9d63vpB3H9SHoIUiupllw==",
+      "requires": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
     "@intlify/bundle-utils": {
       "version": "7.5.1",
       "resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-7.5.1.tgz",
@@ -25122,6 +25280,14 @@
         }
       }
     },
+    "@swc/helpers": {
+      "version": "0.5.11",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.11.tgz",
+      "integrity": "sha512-YNlnKRWF2sVojTpIyzwou9XoTNbzbzONwRhOoniEioF1AtaitTvVZblaQRrAzChWQ1bLYyYSWzM18y4WwgzJ+A==",
+      "requires": {
+        "tslib": "^2.4.0"
+      }
+    },
     "@tailwindcss/aspect-ratio": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.2.tgz",
@@ -26403,6 +26569,14 @@
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
+    "aria-hidden": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "array-buffer-byte-length": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
@@ -27063,6 +27237,11 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="
+    },
     "cluster-key-slot": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/cluster-key-slot/-/cluster-key-slot-1.1.2.tgz",
@@ -32798,6 +32977,35 @@
       "resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz",
       "integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag=="
     },
+    "radix-vue": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/radix-vue/-/radix-vue-1.8.3.tgz",
+      "integrity": "sha512-WPgvEz0i5XKjwahhffD2QPLiOTthTfecoVjwq4l3i3EWBX2tUp4Vw3n3OLGf3S18FN/WfEgD3GIxYfsrnDutqw==",
+      "requires": {
+        "@floating-ui/dom": "^1.6.5",
+        "@floating-ui/vue": "^1.0.6",
+        "@internationalized/date": "^3.5.4",
+        "@internationalized/number": "^3.5.3",
+        "@tanstack/vue-virtual": "^3.5.0",
+        "@vueuse/core": "^10.5.0",
+        "@vueuse/shared": "^10.5.0",
+        "aria-hidden": "^1.2.3",
+        "defu": "^6.1.4",
+        "fast-deep-equal": "^3.1.3",
+        "nanoid": "^5.0.6"
+      },
+      "dependencies": {
+        "@floating-ui/dom": {
+          "version": "1.6.5",
+          "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz",
+          "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==",
+          "requires": {
+            "@floating-ui/core": "^1.0.0",
+            "@floating-ui/utils": "^0.2.0"
+          }
+        }
+      }
+    },
     "radix3": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/radix3/-/radix3-1.1.2.tgz",
@@ -34561,8 +34769,7 @@
     "tslib": {
       "version": "2.6.3",
       "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.6.3.tgz",
-      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
-      "dev": true
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ=="
     },
     "tsscmp": {
       "version": "1.0.6",
diff --git a/package.json b/package.json
index 1a4b2aed0368959668db45ccfa39b00624dca367..cbdeb18503202d2608d249123abadaac382f73cf 100644
--- a/package.json
+++ b/package.json
@@ -26,10 +26,13 @@
     "@vite-pwa/nuxt": "^0.7.0",
     "@vueuse/nuxt": "^10.9.0",
     "chart.js": "^4.4.3",
+    "clsx": "^2.1.1",
     "highlight.js": "^11.9.0",
     "markdown-it": "^14.1.0",
     "nuxt": "^3.11.2",
     "pinia": "^2.1.7",
+    "radix-vue": "^1.8.3",
+    "tailwind-merge": "^2.3.0",
     "vue": "^3.4.27",
     "vue-router": "^4.3.2"
   },
@@ -42,7 +45,9 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": ["npm run prepare"]
+      "pre-commit": [
+        "npm run prepare"
+      ]
     }
   }
 }
diff --git a/pages/mdc.vue b/pages/mdc.vue
index 534d10b0b9e9552cd3fd92ff9eef019b0fd4fba8..82915fd8d6eef48b2b07a7432d57f01c8fce1f7e 100644
--- a/pages/mdc.vue
+++ b/pages/mdc.vue
@@ -1,34 +1,22 @@
 <template>
-  <div class="w-full p-6">
-    <IMdMdc :content="lineChart"/>
-    <UDivider/>
-    <IMdMdc :content="tableChart"/>
-  </div>
+  <ScrollArea class="h-72 w-48 rounded-md border">
+    <div class="p-4">
+      <h4 class="mb-4 text-sm font-medium leading-none">
+        Tags
+      </h4>
+
+      <div v-for="tag in tags" :key="tag">
+        <div class="text-sm">
+          {{ tag }}
+        </div>
+        <UDivider class="my-2" />
+      </div>
+    </div>
+  </ScrollArea>
 </template>
-<script setup>
-const lineChart = `
-::ProseChart{type='line' title='langchain-ai/langchain [2023-06-05,2024-06-04] Star Data' :labels='["2023-06-05","2023-06-12"]' :data='[{"label": "star数量", "data": [43071,44946]}]' }
-`
-const tableChart = `
-::ProseGridTable{:data='[{"repo_id":"806709826","repo_name":"2noise/ChatTTS","primary_language":"Jupyter Notebook","description":"ChatTTS is a generative speech model for daily dialogue.","stars":"1451","forks":"167","pull_requests":"3","pushes":"","total_score":"6000.5405","contributor_logins":"zhouhao27,Huixxi,Thinking80s,bank010,lphkxd","collection_names":""}]'}
-`
-// const table = `
-// | repo_id | repo_name | primary_language | description | stars | forks | pull_requests | pushes | total_score | contributor_logins | collection_names |
-// | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
-// | 806709826 | 2noise/ChatTTS | Jupyter Notebook | ChatTTS is a generative speech model for daily dialogue | 1451 | 167 | 3 |  | 6000.5405 | zhouhao27,Huixxi,Thinking80s,bank010,lphkxd | |
-// `
-// const table2 = `
-// | 列1 | 列2 | 列3 | 列4 | 列5 | 列6 | 列7 | 列8 | 列9 | 列10 |
-// | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
-// | 行1数据A | 数据B | 数据C | 数据D | 数据E | 数据F | 数据G | 数据H | 数据I | 数据J |
-// | 行2数据A | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  |
-// | 行3数据A | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  |
-// | 行4数据A | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  |
-// | 行5数据A | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  |
-// | 行6数据A | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  |
-// | 行7数据A | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  |
-// | 行8数据A | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  |
-// | 行9数据A | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  |
-// | 行10数据A | 数据B | 数据C | 数据D | 数据E | 数据F | 数据G | 数据H | 数据I | 数据J |
-// `
+
+<script setup lang="ts">
+const tags = Array.from({ length: 50 }).map(
+  (_, i, a) => `v1.2.0-beta.${a.length - i}`,
+)
 </script>
\ No newline at end of file
diff --git a/utils/cn.ts b/utils/cn.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5b8110ac37a23023d0364aba2c198940726a1710
--- /dev/null
+++ b/utils/cn.ts
@@ -0,0 +1,8 @@
+import { twMerge } from 'tailwind-merge'
+import { type ClassValue, clsx } from 'clsx'
+
+function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export default cn