diff --git a/docs/components/content/ComponentDefaults.vue b/docs/components/content/ComponentDefaults.vue
index ee27e2d..6c711f4 100644
--- a/docs/components/content/ComponentDefaults.vue
+++ b/docs/components/content/ComponentDefaults.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { camelCase, upperFirst } from 'scule';
+import { camelCase, upperFirst } from 'scule'
 import * as config from '#rayui/ui.config'
 
 const route = useRoute()
diff --git a/docs/components/content/ComponentPreview.vue b/docs/components/content/ComponentPreview.vue
index 7ddfa1e..55196ad 100644
--- a/docs/components/content/ComponentPreview.vue
+++ b/docs/components/content/ComponentPreview.vue
@@ -31,11 +31,11 @@ const props = defineProps({
   },
   options: {
     type: Array as PropType<{ name: string, values: string[], restriction: 'expected' | 'included' | 'excluded' | 'only' }[]>,
-    default: () => []
+    default: () => [],
   },
   excludedProps: {
     type: Array,
-    default: () => []
+    default: () => [],
   },
   filename: {
     type: String,
@@ -110,7 +110,7 @@ const customizableProps = computed(() => Object.keys(componentProps).map((k) =>
     label: camelCase(k),
     options,
   }
-}).filter((prop) => prop !== null))
+}).filter(prop => prop !== null))
 
 const code = computed(() => {
   let code = `\`\`\`html
@@ -145,23 +145,36 @@ const { data: codeRender, error: codeRenderError } = await useAsyncData(`${compo
 
     <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>
 
     <div v-if="customizableProps.length > 0" class="border-b border-neutral-200 dark:border-neutral-700 flex">
-      <div v-for="(prop, k) in customizableProps" :key="k"
-        class="px-2 py-0.5 flex flex-col gap-0.5 border-r dark:border-neutral-700">
+      <div
+        v-for="(prop, k) in customizableProps"
+        :key="k"
+        class="px-2 py-0.5 flex flex-col gap-0.5 border-r dark:border-neutral-700"
+      >
         <label :for="`${prop.name}-prop`" class="text-sm text-neutral-400">{{ prop.name }}</label>
-        <input v-if="prop.type.startsWith('boolean')" :id="`${prop.name}-prop`" v-model="componentProps[prop.name]"
-          type="checkbox" class="mt-1 mb-2">
+        <input
+          v-if="prop.type.startsWith('boolean')"
+          :id="`${prop.name}-prop`"
+          v-model="componentProps[prop.name]"
+          type="checkbox"
+          class="mt-1 mb-2"
+        >
         <select v-else-if="prop.options.length" :id="`${prop.name}-prop`" v-model="componentProps[prop.name]">
           <option v-for="option in prop.options" :key="option" :value="option">
             {{ option }}
           </option>
         </select>
-        <input v-else :id="`${prop.name}-prop`" v-model="componentProps[prop.name]" type="text"
-          placeholder="type something...">
+        <input
+          v-else
+          :id="`${prop.name}-prop`"
+          v-model="componentProps[prop.name]"
+          type="text"
+          placeholder="type something..."
+        >
       </div>
     </div>
 
diff --git a/docs/pages/[...slug].vue b/docs/pages/[...slug].vue
index 9575b06..9de39ed 100644
--- a/docs/pages/[...slug].vue
+++ b/docs/pages/[...slug].vue
@@ -38,8 +38,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>
@@ -65,7 +68,8 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
       </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>
@@ -89,14 +93,14 @@ 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>
         <Toc :toc="page!.body!.toc!.links" />
       </div>
     </div>
-
   </div>
 </template>
 
diff --git a/src/runtime/types/message.d.ts b/src/runtime/types/message.d.ts
index 99456fd..21c0bfd 100644
--- a/src/runtime/types/message.d.ts
+++ b/src/runtime/types/message.d.ts
@@ -1,6 +1,6 @@
+import type { AppConfig } from 'nuxt/schema'
 import type { message } from '../ui.config'
 import type colors from '#ray-colors'
-import type { AppConfig } from 'nuxt/schema';
 
 export type MessageType = keyof typeof message.type
 export type MessageColor = (typeof colors)[number]
diff --git a/src/runtime/ui.config/overlays/message.ts b/src/runtime/ui.config/overlays/message.ts
index 722025c..2ad4c28 100644
--- a/src/runtime/ui.config/overlays/message.ts
+++ b/src/runtime/ui.config/overlays/message.ts
@@ -1,23 +1,23 @@
 export default {
-  wrapper: "mx-auto w-fit pointer-events-auto",
-  container: "px-2 py-1.5 border flex items-center gap-1.5",
-  shadow: "shadow-md shadow-{color}-100 dark:shadow-{color}-900",
-  rounded: "rounded-md",
-  border: "border-{color}-400 dark:border-{color}-600",
-  background: "bg-{color}-50 dark:bg-{color}-900",
-  content: "text-xs font-sans font-bold text-{color}-500 dark:text-{color}-300",
+  wrapper: 'mx-auto w-fit pointer-events-auto',
+  container: 'px-2 py-1.5 border flex items-center gap-1.5',
+  shadow: 'shadow-md shadow-{color}-100 dark:shadow-{color}-900',
+  rounded: 'rounded-md',
+  border: 'border-{color}-400 dark:border-{color}-600',
+  background: 'bg-{color}-50 dark:bg-{color}-900',
+  content: 'text-xs font-sans font-bold text-{color}-500 dark:text-{color}-300',
   type: {
     success: {
-      color: "emerald",
+      color: 'emerald',
     },
     warning: {
-      color: "amber",
+      color: 'amber',
     },
     error: {
-      color: "red",
+      color: 'red',
     },
     info: {
-      color: "blue",
+      color: 'blue',
     },
   },
   default: {
@@ -25,4 +25,4 @@ export default {
     color: 'primary',
     duration: 4000,
   },
-};
+}
diff --git a/src/runtime/utils/colors.ts b/src/runtime/utils/colors.ts
index 1b8c938..942a878 100644
--- a/src/runtime/utils/colors.ts
+++ b/src/runtime/utils/colors.ts
@@ -63,105 +63,105 @@ export const setColors = (theme: TwConfig['theme']) => {
 
 const safelistForComponent: Record<
   string,
-  (colors: string) => TwConfig["safelist"]
+  (colors: string) => TwConfig['safelist']
 > = {
-  button: (colorsToRegex) => [
+  button: colorsToRegex => [
     {
       pattern: RegExp(`^bg-(${colorsToRegex})-50$`),
-      variants: ["hover", "disabled"],
+      variants: ['hover', 'disabled'],
     },
     {
       pattern: RegExp(`^bg-(${colorsToRegex})-100$`),
-      variants: ["hover"],
+      variants: ['hover'],
     },
     {
       pattern: RegExp(`^bg-(${colorsToRegex})-400$`),
-      variants: ["dark", "dark:disabled"],
+      variants: ['dark', 'dark:disabled'],
     },
     {
       pattern: RegExp(`^bg-(${colorsToRegex})-500$`),
-      variants: ["disabled", "dark:hover", "dark:active"],
+      variants: ['disabled', 'dark:hover', 'dark:active'],
     },
     {
       pattern: RegExp(`^bg-(${colorsToRegex})-600$`),
-      variants: ["hover"],
+      variants: ['hover'],
     },
     {
       pattern: RegExp(`^bg-(${colorsToRegex})-700$`),
-      variants: ["active"],
+      variants: ['active'],
     },
     {
       pattern: RegExp(`^bg-(${colorsToRegex})-900$`),
-      variants: ["dark:hover"],
+      variants: ['dark:hover'],
     },
     {
       pattern: RegExp(`^bg-(${colorsToRegex})-950$`),
-      variants: ["dark", "dark:hover", "dark:disabled"],
+      variants: ['dark', 'dark:hover', 'dark:disabled'],
     },
     {
       pattern: RegExp(`^text-(${colorsToRegex})-400$`),
-      variants: ["dark", "dark:hover", "dark:disabled"],
+      variants: ['dark', 'dark:hover', 'dark:disabled'],
     },
     {
       pattern: RegExp(`^text-(${colorsToRegex})-500$`),
-      variants: ["dark:hover", "disabled"],
+      variants: ['dark:hover', 'disabled'],
     },
     {
       pattern: RegExp(`^text-(${colorsToRegex})-600$`),
-      variants: ["hover"],
+      variants: ['hover'],
     },
     {
       pattern: RegExp(`^outline-(${colorsToRegex})-400$`),
-      variants: ["dark:focus-visible"],
+      variants: ['dark:focus-visible'],
     },
     {
       pattern: RegExp(`^outline-(${colorsToRegex})-500$`),
-      variants: ["focus-visible"],
+      variants: ['focus-visible'],
     },
     {
       pattern: RegExp(`^ring-(${colorsToRegex})-300$`),
-      variants: ["focus", "dark:focus"],
+      variants: ['focus', 'dark:focus'],
     },
     {
       pattern: RegExp(`^ring-(${colorsToRegex})-400$`),
-      variants: ["dark:focus-visible"],
+      variants: ['dark:focus-visible'],
     },
     {
       pattern: RegExp(`^ring-(${colorsToRegex})-500$`),
-      variants: ["focus-visible"],
+      variants: ['focus-visible'],
     },
   ],
-  message: (colorsToRegex) => [
+  message: colorsToRegex => [
     {
       pattern: RegExp(`^bg-(${colorsToRegex})-50$`),
     },
     {
       pattern: RegExp(`^bg-(${colorsToRegex})-900$`),
-      variants: ["dark"],
+      variants: ['dark'],
     },
     {
       pattern: RegExp(`^text-(${colorsToRegex})-500$`),
     },
     {
       pattern: RegExp(`^text-(${colorsToRegex})-300$`),
-      variants: ["dark"],
+      variants: ['dark'],
     },
     {
       pattern: RegExp(`^border-(${colorsToRegex})-400$`),
     },
     {
       pattern: RegExp(`^border-(${colorsToRegex})-600$`),
-      variants: ["dark"],
+      variants: ['dark'],
     },
     {
       pattern: RegExp(`^shadow-(${colorsToRegex})-100$`),
     },
     {
       pattern: RegExp(`^shadow-(${colorsToRegex})-900$`),
-      variants: ["dark"],
+      variants: ['dark'],
     },
   ],
-};
+}
 
 export const generateSafelist = (colors: string[], globalColors: string[]) => {
   const safelist = Object.keys(safelistForComponent).flatMap(component =>