diff --git a/docs/components/TitleBar.vue b/docs/components/TitleBar.vue
index e35f0d8..721ea41 100644
--- a/docs/components/TitleBar.vue
+++ b/docs/components/TitleBar.vue
@@ -7,14 +7,22 @@ const route = useRoute()
 <template>
   <header
     class="w-full flex justify-between items-center py-2 h-16 z-50 border-b sticky top-0 bg-white/90 dark:bg-neutral-900 transition-colors"
-    :class="[route.path !== '/' ? 'border-b-neutral-100 dark:border-b-neutral-800' : 'border-b-transparent dark:border-b-transparent']">
+    :class="[route.path !== '/' ? 'border-b-neutral-100 dark:border-b-neutral-800' : 'border-b-transparent dark:border-b-transparent']"
+  >
     <NuxtLink to="/" class="text-neutral-900 dark:text-neutral-100">
-      <h1 class="font-medium text-xl">RayineSoft<sup class="text-sm"> &copy;</sup></h1>
-      <h2 class="font-normal text-xs">Common Components</h2>
+      <h1 class="font-medium text-xl">
+        RayineSoft<sup class="text-sm"> &copy;</sup>
+      </h1>
+      <h2 class="font-normal text-xs">
+        Common Components
+      </h2>
     </NuxtLink>
     <div class="flex items-center gap-4">
-      <NuxtLink to="/getting-started" class="text-neutral-400 dark:text-neutral-500"
-        active-class="!text-neutral-700 dark:!text-neutral-300">Docs</NuxtLink>
+      <NuxtLink
+        to="/getting-started"
+        class="text-neutral-400 dark:text-neutral-500"
+        active-class="!text-neutral-700 dark:!text-neutral-300"
+      >Docs</NuxtLink>
     </div>
   </header>
 </template>
diff --git a/docs/components/Toc.vue b/docs/components/Toc.vue
index 6b3c3de..89f26f3 100644
--- a/docs/components/Toc.vue
+++ b/docs/components/Toc.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref, computed } from 'vue'
 
 interface TocItem {
-  id: string;
-  depth: number;
-  text: string;
-  children?: TocItem[];
+  id: string
+  depth: number
+  text: string
+  children?: TocItem[]
 }
 
 const props = defineProps<{
-  toc: TocItem[];
-  maxDepth?: number;
-}>();
+  toc: TocItem[]
+  maxDepth?: number
+}>()
 
-const maxDepth = props.maxDepth ?? 3;
+const maxDepth = props.maxDepth ?? 3
 
 const filteredToc = computed(() => {
   const filterByDepth = (items: TocItem[]): TocItem[] => {
@@ -22,54 +22,55 @@ const filteredToc = computed(() => {
       .map(item => ({
         ...item,
         children: item.children ? filterByDepth(item.children) : undefined,
-      }));
-  };
+      }))
+  }
 
-  return filterByDepth(props.toc);
-});
+  return filterByDepth(props.toc)
+})
 
-const activeLinks = ref<string[]>([]);
+const activeLinks = ref<string[]>([])
 
 onMounted(() => {
   const observer = new IntersectionObserver(
     (entries) => {
-      entries.forEach(entry => {
+      entries.forEach((entry) => {
         if (entry.isIntersecting) {
-          activeLinks.value.push(entry.target.id);
-        } else {
-          activeLinks.value = activeLinks.value.filter(link => link !== entry.target.id);
+          activeLinks.value.push(entry.target.id)
         }
-      });
+        else {
+          activeLinks.value = activeLinks.value.filter(link => link !== entry.target.id)
+        }
+      })
     },
     // { rootMargin: '0px 0px -80% 0px' }
-  );
+  )
 
-  filteredToc.value.forEach(item => {
-    const element = document.getElementById(item.id);
+  filteredToc.value.forEach((item) => {
+    const element = document.getElementById(item.id)
     if (element) {
-      observer.observe(element);
+      observer.observe(element)
     }
-    item.children?.forEach(child => {
-      const childElement = document.getElementById(child.id);
+    item.children?.forEach((child) => {
+      const childElement = document.getElementById(child.id)
       if (childElement) {
-        observer.observe(childElement);
+        observer.observe(childElement)
       }
-    });
-  });
-});
+    })
+  })
+})
 </script>
 
 <template>
   <ul>
     <template v-for="item in filteredToc" :key="item.id">
       <li>
-        <NuxtLink :href="'#' + item.id" class="link" :class="{ 'active': activeLinks.includes(item.id) }">
+        <NuxtLink :href="'#' + item.id" class="link" :class="{ active: activeLinks.includes(item.id) }">
           {{ item.text }}
         </NuxtLink>
         <ul v-if="item.children && item.children.length" class="ml-4">
           <template v-for="child in item.children" :key="child.id">
             <li>
-              <NuxtLink :href="'#' + child.id" class="link" :class="{ 'active': activeLinks.includes(child.id) }">
+              <NuxtLink :href="'#' + child.id" class="link" :class="{ active: activeLinks.includes(child.id) }">
                 {{ child.text }}
               </NuxtLink>
             </li>
diff --git a/docs/components/content/ComponentPreview.vue b/docs/components/content/ComponentPreview.vue
index e1da870..9fc6523 100644
--- a/docs/components/content/ComponentPreview.vue
+++ b/docs/components/content/ComponentPreview.vue
@@ -1,15 +1,11 @@
 <script lang="ts" setup>
-import FileTypeVue from "../icon/VscodeIconsFileTypeVue.vue"
-import FileTypeTypescript from "../icon/VscodeIconsFileTypeTypescriptOfficial.vue"
-import FileTypeJavascript from "../icon/VscodeIconsFileTypeJsOfficial.vue"
-import TablerTerminal from "../icon/TablerTerminal.vue";
-import { camelCase, kebabCase, upperFirst } from "scule";
+import { camelCase, kebabCase, upperFirst } from 'scule'
+import FileTypeVue from '../icon/VscodeIconsFileTypeVue.vue'
+import FileTypeTypescript from '../icon/VscodeIconsFileTypeTypescriptOfficial.vue'
+import FileTypeJavascript from '../icon/VscodeIconsFileTypeJsOfficial.vue'
+import TablerTerminal from '../icon/TablerTerminal.vue'
 
-const route = useRoute();
-
-const slots = defineSlots<{
-  default?: () => VNode[];
-}>();
+const route = useRoute()
 
 const IconComponents = {
   'vue': FileTypeVue,
@@ -57,26 +53,27 @@ const code = computed(() => {
   code += `/>\n</template>
 \`\`\`
   `
-  return code;
+  return code
 })
 
-const { data: codeRender, error: codeRenderError } = await useAsyncData(`${componentName}-renderer-${JSON.stringify({ slots: slots, code: code.value })}`, async () => {
+const { data: codeRender, error: codeRenderError } = await useAsyncData(`${componentName}-renderer-${JSON.stringify({ slots: props.slots, code: code.value })}`, async () => {
   let formatted = ''
   try {
     // @ts-ignore
     formatted = await $prettier.format(code.value, {
       trailingComma: 'none',
       semi: false,
-      singleQuote: true
+      singleQuote: true,
     })
-  } catch {
+  }
+  catch {
     formatted = code.value
   }
 
   return parseMarkdown(formatted, {
   })
 }, {
-  watch: [code]
+  watch: [code],
 })
 </script>
 
@@ -84,21 +81,21 @@ const { data: codeRender, error: codeRenderError } = await useAsyncData(`${compo
   <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg not-prose my-2 overflow-hidden">
     <div v-if="filename" class="p-4 py-2 border-b border-neutral-200 dark:border-neutral-700">
       <span class="flex items-center gap-1">
-        <component v-if="lang" :is="IconComponents[lang]" class="inline" />
+        <component :is="IconComponents[lang]" v-if="lang" class="inline" />
         <span class="text-sm text-neutral-500 dark:text-neutral-400">{{ filename }}</span>
       </span>
     </div>
 
     <div :class="['p-4 overflow-auto', !!codeRender ? 'border-b border-neutral-200 dark:border-neutral-700' : '']">
       <component :is="componentName" v-bind="componentProps">
-        <slot></slot>
+        <slot />
       </component>
     </div>
 
     <template v-if="codeRender || codeRenderError">
       <div class="overflow-auto">
         <ContentRenderer v-if="codeRender" :value="codeRender" class="p-4 bg-neutral-50 dark:bg-neutral-800/50" />
-        <pre class="p-4" v-if="codeRenderError">{{ codeRenderError }}</pre>
+        <pre v-if="codeRenderError" class="p-4">{{ codeRenderError }}</pre>
       </div>
     </template>
   </div>
diff --git a/docs/components/icon/TablerTerminal.vue b/docs/components/icon/TablerTerminal.vue
index 45d449d..9b61646 100644
--- a/docs/components/icon/TablerTerminal.vue
+++ b/docs/components/icon/TablerTerminal.vue
@@ -1,10 +1,16 @@
-
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 7l5 5l-5 5m7 2h7"></path></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="m5 7l5 5l-5 5m7 2h7"
+  /></svg>
 </template>
 
 <script>
 export default {
-  name: 'TablerTerminal'
+  name: 'TablerTerminal',
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/docs/components/icon/VscodeIconsFileTypeJsOfficial.vue b/docs/components/icon/VscodeIconsFileTypeJsOfficial.vue
index a5c7dbf..5b1b331 100644
--- a/docs/components/icon/VscodeIconsFileTypeJsOfficial.vue
+++ b/docs/components/icon/VscodeIconsFileTypeJsOfficial.vue
@@ -1,10 +1,9 @@
-
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#f5de19" d="M2 2h28v28H2z"></path><path d="M20.809 23.875a2.87 2.87 0 0 0 2.6 1.6c1.09 0 1.787-.545 1.787-1.3c0-.9-.716-1.222-1.916-1.747l-.658-.282c-1.9-.809-3.16-1.822-3.16-3.964c0-1.973 1.5-3.476 3.853-3.476a3.89 3.89 0 0 1 3.742 2.107L25 18.128A1.79 1.79 0 0 0 23.311 17a1.145 1.145 0 0 0-1.259 1.128c0 .789.489 1.109 1.618 1.6l.658.282c2.236.959 3.5 1.936 3.5 4.133c0 2.369-1.861 3.667-4.36 3.667a5.06 5.06 0 0 1-4.795-2.691Zm-9.295.228c.413.733.789 1.353 1.693 1.353c.864 0 1.41-.338 1.41-1.653v-8.947h2.631v8.982c0 2.724-1.6 3.964-3.929 3.964a4.085 4.085 0 0 1-3.947-2.4Z"></path></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#f5de19" d="M2 2h28v28H2z" /><path d="M20.809 23.875a2.87 2.87 0 0 0 2.6 1.6c1.09 0 1.787-.545 1.787-1.3c0-.9-.716-1.222-1.916-1.747l-.658-.282c-1.9-.809-3.16-1.822-3.16-3.964c0-1.973 1.5-3.476 3.853-3.476a3.89 3.89 0 0 1 3.742 2.107L25 18.128A1.79 1.79 0 0 0 23.311 17a1.145 1.145 0 0 0-1.259 1.128c0 .789.489 1.109 1.618 1.6l.658.282c2.236.959 3.5 1.936 3.5 4.133c0 2.369-1.861 3.667-4.36 3.667a5.06 5.06 0 0 1-4.795-2.691Zm-9.295.228c.413.733.789 1.353 1.693 1.353c.864 0 1.41-.338 1.41-1.653v-8.947h2.631v8.982c0 2.724-1.6 3.964-3.929 3.964a4.085 4.085 0 0 1-3.947-2.4Z" /></svg>
 </template>
 
 <script>
 export default {
-  name: 'VscodeIconsFileTypeJsOfficial'
+  name: 'VscodeIconsFileTypeJsOfficial',
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/docs/components/icon/VscodeIconsFileTypeTypescriptOfficial.vue b/docs/components/icon/VscodeIconsFileTypeTypescriptOfficial.vue
index fd5d2c8..3e8a4cd 100644
--- a/docs/components/icon/VscodeIconsFileTypeTypescriptOfficial.vue
+++ b/docs/components/icon/VscodeIconsFileTypeTypescriptOfficial.vue
@@ -1,10 +1,16 @@
-
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><rect width="28" height="28" x="2" y="2" fill="#3178c6" rx="1.312"></rect><path fill="#fff" fillRule="evenodd" d="M18.245 23.759v3.068a6.5 6.5 0 0 0 1.764.575a11.6 11.6 0 0 0 2.146.192a10 10 0 0 0 2.088-.211a5.1 5.1 0 0 0 1.735-.7a3.54 3.54 0 0 0 1.181-1.266a4.47 4.47 0 0 0 .186-3.394a3.4 3.4 0 0 0-.717-1.117a5.2 5.2 0 0 0-1.123-.877a12 12 0 0 0-1.477-.734q-.6-.249-1.08-.484a5.5 5.5 0 0 1-.813-.479a2.1 2.1 0 0 1-.516-.518a1.1 1.1 0 0 1-.181-.618a1.04 1.04 0 0 1 .162-.571a1.4 1.4 0 0 1 .459-.436a2.4 2.4 0 0 1 .726-.283a4.2 4.2 0 0 1 .956-.1a6 6 0 0 1 .808.058a6 6 0 0 1 .856.177a6 6 0 0 1 .836.3a4.7 4.7 0 0 1 .751.422V13.9a7.5 7.5 0 0 0-1.525-.4a12.4 12.4 0 0 0-1.9-.129a8.8 8.8 0 0 0-2.064.235a5.2 5.2 0 0 0-1.716.733a3.66 3.66 0 0 0-1.171 1.271a3.73 3.73 0 0 0-.431 1.845a3.6 3.6 0 0 0 .789 2.34a6 6 0 0 0 2.395 1.639q.63.26 1.175.509a6.5 6.5 0 0 1 .942.517a2.5 2.5 0 0 1 .626.585a1.2 1.2 0 0 1 .23.719a1.1 1.1 0 0 1-.144.552a1.3 1.3 0 0 1-.435.441a2.4 2.4 0 0 1-.726.292a4.4 4.4 0 0 1-1.018.105a5.8 5.8 0 0 1-1.969-.35a5.9 5.9 0 0 1-1.805-1.045m-5.154-7.638h4v-2.527H5.938v2.527H9.92v11.254h3.171Z"></path></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><rect
+    width="28"
+    height="28"
+    x="2"
+    y="2"
+    fill="#3178c6"
+    rx="1.312"
+  /><path fill="#fff" fillRule="evenodd" d="M18.245 23.759v3.068a6.5 6.5 0 0 0 1.764.575a11.6 11.6 0 0 0 2.146.192a10 10 0 0 0 2.088-.211a5.1 5.1 0 0 0 1.735-.7a3.54 3.54 0 0 0 1.181-1.266a4.47 4.47 0 0 0 .186-3.394a3.4 3.4 0 0 0-.717-1.117a5.2 5.2 0 0 0-1.123-.877a12 12 0 0 0-1.477-.734q-.6-.249-1.08-.484a5.5 5.5 0 0 1-.813-.479a2.1 2.1 0 0 1-.516-.518a1.1 1.1 0 0 1-.181-.618a1.04 1.04 0 0 1 .162-.571a1.4 1.4 0 0 1 .459-.436a2.4 2.4 0 0 1 .726-.283a4.2 4.2 0 0 1 .956-.1a6 6 0 0 1 .808.058a6 6 0 0 1 .856.177a6 6 0 0 1 .836.3a4.7 4.7 0 0 1 .751.422V13.9a7.5 7.5 0 0 0-1.525-.4a12.4 12.4 0 0 0-1.9-.129a8.8 8.8 0 0 0-2.064.235a5.2 5.2 0 0 0-1.716.733a3.66 3.66 0 0 0-1.171 1.271a3.73 3.73 0 0 0-.431 1.845a3.6 3.6 0 0 0 .789 2.34a6 6 0 0 0 2.395 1.639q.63.26 1.175.509a6.5 6.5 0 0 1 .942.517a2.5 2.5 0 0 1 .626.585a1.2 1.2 0 0 1 .23.719a1.1 1.1 0 0 1-.144.552a1.3 1.3 0 0 1-.435.441a2.4 2.4 0 0 1-.726.292a4.4 4.4 0 0 1-1.018.105a5.8 5.8 0 0 1-1.969-.35a5.9 5.9 0 0 1-1.805-1.045m-5.154-7.638h4v-2.527H5.938v2.527H9.92v11.254h3.171Z" /></svg>
 </template>
 
 <script>
 export default {
-  name: 'VscodeIconsFileTypeTypescriptOfficial'
+  name: 'VscodeIconsFileTypeTypescriptOfficial',
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/docs/components/icon/VscodeIconsFileTypeVue.vue b/docs/components/icon/VscodeIconsFileTypeVue.vue
index 992b15c..17db77b 100644
--- a/docs/components/icon/VscodeIconsFileTypeVue.vue
+++ b/docs/components/icon/VscodeIconsFileTypeVue.vue
@@ -1,10 +1,9 @@
-
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#41b883" d="M24.4 3.925H30l-14 24.15L2 3.925h10.71l3.29 5.6l3.22-5.6Z"></path><path fill="#41b883" d="m2 3.925l14 24.15l14-24.15h-5.6L16 18.415L7.53 3.925Z"></path><path fill="#35495e" d="M7.53 3.925L16 18.485l8.4-14.56h-5.18L16 9.525l-3.29-5.6Z"></path></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#41b883" d="M24.4 3.925H30l-14 24.15L2 3.925h10.71l3.29 5.6l3.22-5.6Z" /><path fill="#41b883" d="m2 3.925l14 24.15l14-24.15h-5.6L16 18.415L7.53 3.925Z" /><path fill="#35495e" d="M7.53 3.925L16 18.485l8.4-14.56h-5.18L16 9.525l-3.29-5.6Z" /></svg>
 </template>
 
 <script>
 export default {
-  name: 'VscodeIconsFileTypeVue'
+  name: 'VscodeIconsFileTypeVue',
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/docs/layouts/default.vue b/docs/layouts/default.vue
index a83bef0..d8d70a6 100644
--- a/docs/layouts/default.vue
+++ b/docs/layouts/default.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 useSeoMeta({
-  title: 'RayineSoft Common Components'
+  title: 'RayineSoft Common Components',
 })
 </script>
 
@@ -8,7 +8,7 @@ useSeoMeta({
   <div class="max-w-6xl mx-auto px-4">
     <TitleBar />
     <main class="pt-4">
-      <slot></slot>
+      <slot />
     </main>
   </div>
 </template>
@@ -23,7 +23,6 @@ body {
   background-color: rgba(0, 0, 0, 0) !important;
 } */
 
-
 /*
 @media (prefers-color-scheme: dark) {
 
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index a4f9d1b..f12c30a 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -1,49 +1,49 @@
-import module from "../src/module";
-import defaultTheme from "tailwindcss/defaultTheme";
+import defaultTheme from 'tailwindcss/defaultTheme'
+import module from '../src/module'
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  compatibilityDate: "2024-04-03",
-  modules: ["@nuxt/content", "@nuxt/fonts", "@nuxtjs/color-mode", module],
+
+  modules: ['@nuxt/content', '@nuxt/fonts', '@nuxtjs/color-mode', module],
   devtools: { enabled: true },
+  colorMode: {
+    preference: 'system',
+    classSuffix: '',
+  },
+  content: {
+    highlight: {
+      langs: ['postcss', 'mdc', 'html', 'vue', 'ts', 'js', 'bash'],
+    },
+  },
+  mdc: {
+    highlight: {
+      theme: {
+        light: 'material-theme-lighter',
+        dark: 'material-theme',
+      },
+      themes: ['material-theme-lighter', 'material-theme'],
+    },
+  },
+  routeRules: {
+    '/components': { redirect: '/components/button' },
+  }, compatibilityDate: '2024-04-03',
+  typescript: {
+    includeWorkspace: true,
+  },
   rayui: {
     // @ts-ignore
     globalComponents: true,
-    safeColors: ["amber", "emerald", "red", "sky", "violet", "cyan"],
-  },
-  routeRules: {
-    "/components": { redirect: "/components/button" },
+    safeColors: ['amber', 'emerald', 'red', 'sky', 'violet', 'cyan'],
   },
   tailwindcss: {
     config: {
       theme: {
         extend: {
           fontFamily: {
-            sans: ["Rubik", '"Noto Sans SC"', ...defaultTheme.fontFamily.sans],
+            sans: ['Rubik', '"Noto Sans SC"', ...defaultTheme.fontFamily.sans],
           },
         },
       },
     },
   },
-  colorMode: {
-    preference: "system",
-    classSuffix: "",
-  },
-  content: {
-    highlight: {
-      langs: ["postcss", "mdc", "html", "vue", "ts", "js", "bash"],
-    },
-  },
-  mdc: {
-    highlight: {
-      theme: {
-        light: "material-theme-lighter",
-        dark: "material-theme",
-      },
-      themes: ["material-theme-lighter", "material-theme"],
-    },
-  },
-  typescript: {
-    includeWorkspace: true,
-  },
-});
+})
diff --git a/docs/pages/[...slug].vue b/docs/pages/[...slug].vue
index 899f9bc..21944a2 100644
--- a/docs/pages/[...slug].vue
+++ b/docs/pages/[...slug].vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { withoutTrailingSlash } from 'ufo';
+import { withoutTrailingSlash } from 'ufo'
 
 const route = useRoute()
 
@@ -10,7 +10,7 @@ const { data: page } = await useAsyncData(route.path, () => queryContent(route.p
 
 if (!page.value) {
   throw createError({
-    statusCode: 404, statusMessage: 'Page not found', fatal: true
+    statusCode: 404, statusMessage: 'Page not found', fatal: true,
   })
 }
 
@@ -21,8 +21,8 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
     .where({
       _extension: 'md',
       navigation: {
-        $ne: false
-      }
+        $ne: false,
+      },
     })
     .only(['title', 'description', '_path'])
     .findSurround(withoutTrailingSlash(route.path))
@@ -41,8 +41,11 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
               </NuxtLink>
               <ul v-if="link.children" class="pl-4 pt-2 space-y-1">
                 <li v-for="child in link.children" :key="child._path">
-                  <NuxtLink :to="child._path" class="text-sm text-neutral-500 dark:text-neutral-400"
-                    active-class="text-primary font-medium">
+                  <NuxtLink
+                    :to="child._path"
+                    class="text-sm text-neutral-500 dark:text-neutral-400"
+                    active-class="text-primary font-medium"
+                  >
                     {{ child.title }}
                   </NuxtLink>
                 </li>
@@ -55,22 +58,27 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
 
     <div class="col-span-12" :class="[hasToc ? 'md:col-span-8' : 'md:col-span-10']">
       <div>
-        <h1 class="text-3xl text-primary font-medium">{{ page?.title || 'untitled' }}</h1>
-        <p v-if="page?.description" class="text-lg text-neutral-500 mt-2">{{ page.description }}</p>
+        <h1 class="text-3xl text-primary font-medium">
+          {{ page?.title || 'untitled' }}
+        </h1>
+        <p v-if="page?.description" class="text-lg text-neutral-500 mt-2">
+          {{ page.description }}
+        </p>
       </div>
-      <hr class="my-4 dark:border-neutral-700" />
+      <hr class="my-4 dark:border-neutral-700">
       <div class="doc-body">
         <ContentRenderer v-if="page?.body" :value="page" />
       </div>
 
       <div
-        class="w-full flex justify-between gap-4 mt-12 pt-12 border-t border-t-neutral-200 dark:border-t-neutral-700">
+        class="w-full flex justify-between gap-4 mt-12 pt-12 border-t border-t-neutral-200 dark:border-t-neutral-700"
+      >
         <div class="flex-1">
           <NuxtLink v-if="surround?.[0]" :to="surround[0]._path" class="surround-btn">
             <div>
               <span class="tip">Previous</span>
               <span class="title">{{ surround[0].title }}</span>
-              <span class="description" v-if="surround[0].description">{{ surround[0].description }}</span>
+              <span v-if="surround[0].description" class="description">{{ surround[0].description }}</span>
             </div>
           </NuxtLink>
         </div>
@@ -79,7 +87,7 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
             <div>
               <span class="tip">Next</span>
               <span class="title">{{ surround[1].title }}</span>
-              <span class="description" v-if="surround[1].description">{{ surround[1].description }}</span>
+              <span v-if="surround[1].description" class="description">{{ surround[1].description }}</span>
             </div>
           </NuxtLink>
         </div>
@@ -88,7 +96,8 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
 
     <div v-if="hasToc" class="hidden" :class="{ 'col-span-2 md:block': hasToc }">
       <div
-        class="bg-neutral-50 dark:bg-neutral-800/50 rounded-lg px-4 py-3 overflow-hidden overflow-y-auto sticky top-[calc(64px+16px)]">
+        class="bg-neutral-50 dark:bg-neutral-800/50 rounded-lg px-4 py-3 overflow-hidden overflow-y-auto sticky top-[calc(64px+16px)]"
+      >
         <span class="text-xs text-neutral-600 dark:text-neutral-300 font-medium inline-block mb-2">
           Table of contents
         </span>
diff --git a/docs/pages/index.vue b/docs/pages/index.vue
index ea14551..30398ab 100644
--- a/docs/pages/index.vue
+++ b/docs/pages/index.vue
@@ -5,11 +5,18 @@ const router = useRouter()
 <template>
   <div class="flex flex-col gap-8">
     <div
-      class="py-20 flex flex-col justify-center items-center rounded-xl border border-neutral-200 dark:border-neutral-800 pattern">
+      class="py-20 flex flex-col justify-center items-center rounded-xl border border-neutral-200 dark:border-neutral-800 pattern"
+    >
       <div class="text-xl text-neutral-600 dark:text-neutral-300 font-bold">
-        <h2 class="text-xl">RayineUI <span class="font-medium">is multi-purpose</span></h2>
-        <h1 class="text-4xl text-primary">Customizable</h1>
-        <h1 class="text-2xl text-primary font-medium pl-0.5">UI Library</h1>
+        <h2 class="text-xl">
+          RayineUI <span class="font-medium">is multi-purpose</span>
+        </h2>
+        <h1 class="text-4xl text-primary">
+          Customizable
+        </h1>
+        <h1 class="text-2xl text-primary font-medium pl-0.5">
+          UI Library
+        </h1>
       </div>
     </div>
     <div class="flex justify-center items-center gap-4">
diff --git a/docs/utils/index.ts b/docs/utils/index.ts
index 1c515ec..b493c3c 100644
--- a/docs/utils/index.ts
+++ b/docs/utils/index.ts
@@ -1,17 +1,17 @@
 export const renderObject = (obj: any): string => {
   if (Array.isArray(obj)) {
-    return `[${obj.map(renderObject).join(", ")}]`;
+    return `[${obj.map(renderObject).join(', ')}]`
   }
 
-  if (typeof obj === "object") {
+  if (typeof obj === 'object') {
     return `{ ${Object.entries(obj)
       .map(([key, value]) => `${key}: ${renderObject(value)}`)
-      .join(", ")} }`;
+      .join(', ')} }`
   }
 
-  if (typeof obj === "string") {
-    return `'${obj}'`;
+  if (typeof obj === 'string') {
+    return `'${obj}'`
   }
 
-  return obj;
-};
+  return obj
+}
diff --git a/src/module.ts b/src/module.ts
index 976cbf5..63c2d39 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -86,13 +86,13 @@ export default defineNuxtModule<ModuleOptions>({
       watch: false,
     })
     addComponentsDir({
-      path: resolve(runtimePath, "components", "overlays"),
+      path: resolve(runtimePath, 'components', 'overlays'),
       prefix: _options.prefix,
       global: _options.globalComponents,
       watch: false,
     })
     addComponentsDir({
-      path: resolve(runtimePath, "components", "icons"),
+      path: resolve(runtimePath, 'components', 'icons'),
       prefix: 'Icon',
       global: _options.globalComponents,
       watch: false,
diff --git a/src/tailwind.ts b/src/tailwind.ts
index 2bdbcc6..d733145 100644
--- a/src/tailwind.ts
+++ b/src/tailwind.ts
@@ -28,12 +28,12 @@ export const installTailwind = (
   })
 
   const configTemplate = addTemplate({
-    filename: "ray-tailwind.config.cjs",
+    filename: 'ray-tailwind.config.cjs',
     write: true,
     getContents: ({ nuxt }) => `
       const { defaultExtractor: createDefaultExtractor } = require('tailwindcss/lib/lib/defaultExtractor.js')
       const { customSafelistExtractor, generateSafelist } = require(${JSON.stringify(
-        resolve(runtimePath, "utils", "colors")
+        resolve(runtimePath, 'utils', 'colors'),
       )})
 
       const defaultExtractor = createDefaultExtractor({ tailwindConfig: { separator: ':' } })
@@ -46,10 +46,10 @@ export const installTailwind = (
         content: {
           files: [
             ${JSON.stringify(
-              resolve(runtimePath, "components/**/*.{vue,mjs,ts}")
+              resolve(runtimePath, 'components/**/*.{vue,mjs,ts}'),
             )},
             ${JSON.stringify(
-              resolve(runtimePath, "ui.config/**/*.{mjs,js,ts}")
+              resolve(runtimePath, 'ui.config/**/*.{mjs,js,ts}'),
             )}
           ],
         },
@@ -63,19 +63,19 @@ export const installTailwind = (
             return [
               ...defaultExtractor(content),
               ...customSafelistExtractor(${JSON.stringify(
-                moduleOptions.prefix
+                moduleOptions.prefix,
               )}, content, ${JSON.stringify(
-      nuxt.options.appConfig.rayui.colors
-    )}, ${JSON.stringify(moduleOptions.safeColors)})
+                nuxt.options.appConfig.rayui.colors,
+              )}, ${JSON.stringify(moduleOptions.safeColors)})
             ]
           }
         },
         safelist: generateSafelist(${JSON.stringify(
-          moduleOptions.safeColors || []
+          moduleOptions.safeColors || [],
         )}, ${JSON.stringify(nuxt.options.appConfig.rayui.colors)}),
       }
     `,
-  });
+  })
 
   const { configPath: userTwConfigPath = [], ...twModuleConfig }
     = nuxt.options.tailwindcss ?? {}