diff --git a/components/Ui/toast/index.ts b/components/Ui/toast/index.ts
index 0817d86..1b5c323 100644
--- a/components/Ui/toast/index.ts
+++ b/components/Ui/toast/index.ts
@@ -9,7 +9,7 @@ export { default as ToastClose } from './ToastClose.vue'
 export { default as ToastTitle } from './ToastTitle.vue'
 export { default as ToastDescription } from './ToastDescription.vue'
 export { default as ToastProvider } from './ToastProvider.vue'
-export { toast, useToast } from './use-toast'
+export { toast, useToast } from './use-toast.ts'
 
 import { type VariantProps, cva } from 'class-variance-authority'
 
diff --git a/components/Ui/toast/use-toast.ts b/components/Ui/toast/use-toast.ts
index 500e929..7d2756c 100644
--- a/components/Ui/toast/use-toast.ts
+++ b/components/Ui/toast/use-toast.ts
@@ -1,11 +1,11 @@
-import { computed, ref } from 'vue'
+import { computed , ref } from 'vue';
 import type { Component, VNode } from 'vue'
 import type { ToastProps } from '.'
 
 const TOAST_LIMIT = 1
 const TOAST_REMOVE_DELAY = 1000000
 
-export type StringOrVNode =
+  export type StringOrVNode =
   | string
   | VNode
   | (() => VNode)
@@ -162,4 +162,4 @@ function toast(props: Toast) {
   }
 }
 
-export { toast, useToast }
+export { toast, useToast }
\ No newline at end of file
diff --git a/pages/docs/toast.vue b/pages/docs/toast.vue
index 6f5fd00..f8c9e85 100644
--- a/pages/docs/toast.vue
+++ b/pages/docs/toast.vue
@@ -12,7 +12,7 @@
 
   <div class="preview flex min-h-[50px] w-auto justify-center p-10 items-center space-x-4 bg-gray-100 rounded-lg mx-10">
     <!-- 这里填写组件 -->
-    <!-- <UiButton 
+    <UiButton 
     variant="outline" @click="showToast">Add to calendar
    </UiButton>
 
@@ -38,7 +38,7 @@
 
     <UiButton 
     variant="outline" @click="showVariantToast('error')">error
-   </UiButton> -->
+   </UiButton>
 
 
     <!-- 这里填写组件 -->
@@ -47,71 +47,71 @@
 </template>
 
 <script lang="ts" setup>
-// import { toast , useToast } from '../../components/ui/toast/use-toast.ts'
-// import { ToastAction } from '@/components/ui/toast'
-
-// const { toast } = useToast()
-
-// function showToast() {
-//   toast({
-//     title: 'Scheduled: Catch up',
-//     description: 'Friday, February 10, 2023 at 5:57 PM',
-//   })
-// }
-
-// function showToastWithAction(){
-//   toast({
-//         title: 'Uh oh! Something went wrong.',
-//         description: 'There was a problem with your request.',
-//         action: h(ToastAction, {
-//           altText: 'Try again',
-//         }, {
-//           default: () => { return 'Try again' },
-//         }),
-//       });
-// }
-
-// function showVariantToastWithAction(){
-//      toast({
-//         title: 'Uh oh! Something went wrong.',
-//         description: 'There was a problem with your request.',
-//         variant: 'destructive',
-//         action: h(ToastAction, {
-//           altText: 'Try again',
-//         }, {
-//           default: () => { return 'Try again' },
-//         }),
-//       });
-// }
-
-// function showVariantToast(type:string){
-//     toast({
-//         title: 'Type of toast .',
-//         description: 'There was a problem with your request.',
-//         icon: getToasticon(type),
-//         variant:   `${type}`,
-//         action: h(ToastAction, {
-//           altText: 'Try again',
-//         }, {
-//           default: () => { return 'Try again' },
-//         }),
-//       });
-// }
-
-// const getToasticon = (type: string) => {
-//     switch (type) {
-//       case "success":
-//         return "lucide:badge-check";
-//       case "info":
-//         return "lucide:badge-info";
-//       case "warning":
-//         return "lucide:badge-alert";
-//       case "destructive":
-//         return "lucide:badge-x";
-//       default:
-//         return "lucide:badge-check";
-//     }
-//   };
+import { toast , useToast } from '../../components/ui/toast/use-toast.ts'
+import { ToastAction } from '@/components/ui/toast'
+
+const { toast } = useToast()
+
+function showToast() {
+  toast({
+    title: 'Scheduled: Catch up',
+    description: 'Friday, February 10, 2023 at 5:57 PM',
+  })
+}
+
+function showToastWithAction(){
+  toast({
+        title: 'Uh oh! Something went wrong.',
+        description: 'There was a problem with your request.',
+        action: h(ToastAction, {
+          altText: 'Try again',
+        }, {
+          default: () => { return 'Try again' },
+        }),
+      });
+}
+
+function showVariantToastWithAction(){
+     toast({
+        title: 'Uh oh! Something went wrong.',
+        description: 'There was a problem with your request.',
+        variant: 'destructive',
+        action: h(ToastAction, {
+          altText: 'Try again',
+        }, {
+          default: () => { return 'Try again' },
+        }),
+      });
+}
+
+function showVariantToast(type:string){
+    toast({
+        title: 'Type of toast .',
+        description: 'There was a problem with your request.',
+        icon: getToasticon(type),
+        variant:   `${type}`,
+        action: h(ToastAction, {
+          altText: 'Try again',
+        }, {
+          default: () => { return 'Try again' },
+        }),
+      });
+}
+
+const getToasticon = (type: string) => {
+    switch (type) {
+      case "success":
+        return "lucide:badge-check";
+      case "info":
+        return "lucide:badge-info";
+      case "warning":
+        return "lucide:badge-alert";
+      case "destructive":
+        return "lucide:badge-x";
+      default:
+        return "lucide:badge-check";
+    }
+  };
 
 </script>