diff --git a/components/content/example.vue b/components/content/example.vue
index c7197e8..206537a 100644
--- a/components/content/example.vue
+++ b/components/content/example.vue
@@ -1,177 +1,42 @@
 <template>
   <VCard>
-    <VTabs v-model="tab" bg-color="primary">
-      <VTab value="toast">
-        toast
-      </VTab>
-      <VTab value="alert">
-        alert
-      </VTab>
-      <VTab value="confirm">
-        confirm
-      </VTab>
-      <VTab value="input">
-        input
-      </VTab>
-      <VTab value="dialog">
-        dialog
-      </VTab>
-    </VTabs>
+    <VToolbar color="primary">
+      <VTabs
+        v-model="tab"
+      >
+        <VTab
+          v-for="item in tabs"
+          :key="item"
+          :value="item"
+          :text="item"
+        />
+      </VTabs>
+      <VSpacer />
+      <v-btn @click="toggleTheme">
+        Toggle Theme
+      </v-btn>
+    </VToolbar>
+
     <VCardText>
       <VTabsWindow v-model="tab">
         <VTabsWindowItem value="toast">
-          <VRow align="center" justify="center">
-            <VCol cols="8" class="d-flex justify-center">
-              <pre>
-                      {{ toastCode }}
-                    </pre>
-            </VCol>
-            <VCol cols="4">
-              <VCard title="Props">
-                <VTextField :model-value="toastOptions.title" label="Title"
-                  @change="toastOptions.title = $event.target.value" />
-                <VTextField :model-value="toastOptions.text" label="Text"
-                  @change="toastOptions.text = $event.target.value" />
-                <VTextField :model-value="toastOptions.icon" label="Icon"
-                  @change="toastOptions.icon = $event.target.value" />
-                <VSelect v-model="toastOptions.color" clearable
-                  :items="['primary', 'secondary', 'success', 'error', 'purple']" label="Color" />
-                <VSelect v-model="toastOptions.type" clearable :items="['success', 'info', 'warning', 'error']"
-                  label="Type" />
-              </VCard>
-              <VCard title="Options">
-                <VSelect v-model="toastOptions.options.location"
-                  :items="['top', 'bottom', 'top left', 'top right', 'bottom left', 'bottom right']" label="Location" />
-
-                <VSlider v-model.number="toastOptions.options.timeout" label="Timeout" min="3000" max="30000"
-                  step="1000" thumb-label="always" class="mt-5">
-                  <template #thumb-label="{ modelValue }">
-                    {{ modelValue / 1000 }}s
-                  </template>
-                </VSlider>
-                <VCardActions>
-                  <VBtn block :color="toastOptions.color" text="Show Toast" variant="outlined" @click="onOpenToast" />
-                </VCardActions>
-              </VCard>
-            </VCol>
-          </VRow>
+          <ExamplesToast />
         </VTabsWindowItem>
 
         <VTabsWindowItem value="alert">
-          <VRow align="center" justify="center">
-            <VCol cols="8" class="d-flex justify-center">
-              <pre>{{ alertCode }}</pre>
-            </VCol>
-            <VCol cols="4">
-              <VCard title="Props">
-                <VTextField :model-value="alertOptions.title" label="Title"
-                  @change="alertOptions.title = $event.target.value" />
-                <VTextField :model-value="alertOptions.text" label="Text"
-                  @change="alertOptions.text = $event.target.value" />
-                <VTextField :model-value="alertOptions.options.width" label="Width"
-                  @change="alertOptions.options.width = $event.target.value" />
-                <VSelect v-model="alertOptions.options.textAlign" :items="['left', 'center', 'right']"
-                  label="Text Align" />
-                <VSelect v-model="alertOptions.options.buttonAlign" :items="['start', 'center', 'end']"
-                  label="Buttons Align" />
-                <VSelect v-model="alertOptions.color" :items="['primary', 'secondary', 'success', 'error', 'purple']"
-                  label="Color" />
-                <VSwitch v-model="alertOptions.options.divider" label="Divider" />
-                <VSwitch v-model="alertOptions.options.persistent" label="Persistent" />
-                <VCardActions>
-                  <VBtn block text="Alert" variant="outlined" @click="onOpenAlert" />
-                </VCardActions>
-              </VCard>
-            </VCol>
-          </VRow>
+          <ExamplesAlert />
         </VTabsWindowItem>
 
         <VTabsWindowItem value="confirm">
-          <VRow align="center" justify="center">
-            <VCol cols="8" class="d-flex justify-center">
-              <pre>{{ confirmCode }}</pre>
-            </VCol>
-            <VCol cols="4">
-              <VCard title="Props">
-                <VTextField :model-value="confirmOptions.title" label="Title"
-                  @change="confirmOptions.title = $event.target.value" />
-                <VTextField :model-value="confirmOptions.text" label="Text"
-                  @change="confirmOptions.text = $event.target.value" />
-                <VTextField :model-value="confirmOptions.options.width" label="Width"
-                  @change="confirmOptions.options.width = $event.target.value" />
-                <VSelect v-model="confirmOptions.options.textAlign" :items="['left', 'center', 'right']"
-                  label="Text Align" />
-                <VSelect v-model="confirmOptions.options.buttonAlign" :items="['start', 'center', 'end']"
-                  label="Buttons Align" />
-                <VSelect v-model="confirmOptions.color" :items="['primary', 'secondary', 'success', 'error', 'purple']"
-                  label="Color" />
-                <VSwitch v-model="confirmOptions.options.divider" label="Divider" />
-                <VSwitch v-model="confirmOptions.options.persistent" label="Persistent" />
-                <VCardActions>
-                  <VBtn block text="Confirm" variant="outlined" @click="onOpenConfirm" />
-                </VCardActions>
-              </VCard>
-            </VCol>
-          </VRow>
+          <ExamplesConfirm />
         </VTabsWindowItem>
 
         <VTabsWindowItem value="input">
-          <VRow align="center" justify="center">
-            <VCol cols="4">
-              <VBtn v-notifier-confirm="{
-                ...confirmDirectyOptions,
-                onSubmit() {
-                  console.log('Submit')
-                },
-              }" text="Quick confirm" variant="outlined" />
-              <pre>
-        {{ confirmDirectyCode }}
-      </pre>
-            </VCol>
-            <VCol cols="4">
-              <VBtn v-notifier-input="{
-                ...confirmDirectyOptions,
-                onSubmit(data: any) {
-                  console.log('Submit', data)
-                },
-              }" text="Input Inline" variant="outlined" />
-              <pre>
-        {{ inputDirectyCode }}
-      </pre>
-            </VCol>
-            <VCol cols="4">
-              <VCard title="Props">
-                <VTextField :model-value="confirmDirectyOptions.title" label="Title"
-                  @change="confirmDirectyOptions.title = $event.target.value" />
-                <VTextField :model-value="confirmDirectyOptions.text" label="Text"
-                  @change="confirmDirectyOptions.text = $event.target.value" />
-                <VSelect v-model="confirmDirectyOptions.color"
-                  :items="['primary', 'secondary', 'success', 'error', 'purple']" label="Color" />
-              </VCard>
-            </VCol>
-          </VRow>
+          <ExamplesInput />
         </VTabsWindowItem>
+
         <VTabsWindowItem value="dialog">
-          <VRow align="center" justify="center">
-            <VCol cols="8" class="d-flex justify-center">
-              <pre>
-        {{ dialogCode }}
-      </pre>
-            </VCol>
-            <VCol cols="4">
-              <VCard title="Props">
-                <VTextField :model-value="dialogOptions.msg" label="Component prop"
-                  @change="dialogOptions.msg = $event.target.value" />
-              </VCard>
-              <VCard title="Options">
-                <VTextField :model-value="dialogOptions.options.title" label="Title"
-                  @change="dialogOptions.options.title = $event.target.value" />
-                <VTextField :model-value="dialogOptions.options.width" label="Width"
-                  @change="dialogOptions.options.width = $event.target.value" />
-                <VBtn block text="Component" variant="outlined" @click="onOpenDialog" />
-              </VCard>
-            </VCol>
-          </VRow>
+          <ExamplesDialog />
         </VTabsWindowItem>
       </VTabsWindow>
     </VCardText>
@@ -180,200 +45,14 @@
 </template>
 
 <script setup lang="ts">
-  import { Test } from '#components'
-
-  const tab = ref('toast')
-
-  const notifier = useNotifier()
-
-  const dialogOptions = reactive(({
-    msg: 'World',
-    options: {
-      title: '',
-      width: 500,
-    },
-  }))
-
-  function onOpenDialog() {
-    notifier.dialog(Test, {
-      ...dialogOptions,
-      onSubmit(data) {
-        console.log('Submit', data)
-      },
-      onClose() {
-        console.log('Cancel')
-      },
-    })
-  }
-
-  const dialogCode = computed(() => `
-//import { Test } from '#components' // Using Nuxt 
-import { Test } from './components/Test.vue' // Using Vue 3
-
-
-const notifier = useNotifier()
-
-notifier.dialog(Test, {
-  msg: ${dialogOptions.msg},
-  options: {
-    title: ${dialogOptions.options.title},
-    width: ${dialogOptions.options.width},
-  },
-  onSubmit(data) {
-    console.log('Submit', data)
-  },
-  onClose() {
-    console.log('Cancel')
-  },
-})
-`)
-
-  const toastOptions = reactive(({
-    title: '',
-    text: 'This is toast content',
-    icon: undefined,
-    color: undefined,
-    type: undefined,
-    options: {
-      location: 'top right',
-      timeout: 5000,
-    },
-  }))
-
-  watch(toastOptions, () => {
-    onOpenToast()
-  })
-
-  function onOpenToast() {
-    notifier.toast(toastOptions)
-  }
-
-  const toastCode = computed(() => `
-const notifier = useNotifier()
-
-notifier.toast({  
-  ${toastOptions.title ? `title: '${toastOptions.title}',` : ''}
-  text: '${toastOptions.text}',
-  ${toastOptions.icon ? `icon: '${toastOptions.icon}',` : ''}
-  ${toastOptions.color ? `color: '${toastOptions.color}',` : ''}
-  ${toastOptions.type ? `type: '${toastOptions.type}',` : ''}
-  options: {
-    location: '${toastOptions.options.location}',
-    timeout: ${toastOptions.options.timeout},
-  },
-})`)
-
-  const confirmOptions = reactive(({
-    title: 'Are you sure?',
-    text: 'Do you want to continue?',
-    color: 'primary',
-    options: {
-      divider: true,
-      textAlign: undefined,
-      buttonAlign: undefined,
-      persistent: false,
-      width: 400,
-    },
-  }))
-
-  watch(confirmOptions, () => {
-    onOpenConfirm()
-  })
-
-  function onOpenConfirm() {
-    notifier.confirm({
-      ...confirmOptions,
-      onSubmit: (data) => {
-        console.log('Submit', data)
-      },
-      onClose: () => console.log('Cancel'),
-    })
-  }
-
-  const confirmCode = computed(() => `
-const notifier = useNotifier()
-
-notifier.confirm({  
-  title: '${confirmOptions.text}',
-  text: '${confirmOptions.text}',
-  color: '${confirmOptions.color}',
-  onSubmit(data) {
-    console.log('Submit', data)
-  },
-  onClose() {
-    console.log('Cancel')
-  },
-})`)
-
-  const alertOptions = reactive(({
-    title: 'Are you sure?',
-    text: 'Do you want to continue?',
-    color: 'primary',
-    options: {
-      divider: true,
-      textAlign: undefined,
-      buttonAlign: undefined,
-      persistent: false,
-      width: 400,
-    },
-  }))
-
-  watch(alertOptions, () => {
-    onOpenAlert()
-  })
-
-  const alertCode = computed(() => `
-const notifier = useNotifier()
-
-notifier.alert({  
-  title: '${alertOptions.text}',
-  text: '${alertOptions.text}',
-  color: '${alertOptions.color}',  
-  onSubmit(data) {
-    console.log('Submit', data)
-  },  
-})`)
-
-  function onOpenAlert() {
-    notifier.alert({
-      ...alertOptions,
-      onSubmit: (data: any) => console.log('Submit', data),
-    })
-  }
+import { useTheme } from 'vuetify'
 
-  const confirmDirectyOptions = reactive(({
-    title: 'Are you sure?',
-    text: 'Do you want to continue?',
-    color: 'primary',
-  }))
+const tab = ref('toast')
+const tabs = ['toast', 'alert', 'confirm', 'input', 'dialog']
 
-  const confirmDirectyCode = computed(() => `
-<VBtn
-  v-notifier-confirm="{
-    title: '${confirmDirectyOptions.title}',
-    text: '${confirmDirectyOptions.text}',
-    color: '${confirmDirectyOptions.color}',
-    onSubmit() {
-      console.log('Submit')
-    },
-  }"
-  text="Quick confirm"
-  variant="outlined"
-/>
-`)
+const theme = useTheme()
 
-  const inputDirectyCode = computed(() => `
-<VBtn
-  v-notifier-input="{
-    title: '${confirmDirectyOptions.title}',
-    text: '${confirmDirectyOptions.text}',
-    color: '${confirmDirectyOptions.color}',
-    onSubmit(data: any) {
-      console.log('Submit', data)
-    },
-  }"
-  text="Input Inline"
-  variant="outlined"
-/>
-`)
+function toggleTheme() {
+  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
+}
 </script>
diff --git a/components/examples/alert.vue b/components/examples/alert.vue
new file mode 100644
index 0000000..190b6bf
--- /dev/null
+++ b/components/examples/alert.vue
@@ -0,0 +1,105 @@
+<template>
+  <VRow
+    align="center"
+    justify="center"
+  >
+    <VCol
+      cols="12"
+      md="8"
+      class="d-flex justify-center"
+    >
+      <pre class="overflow-auto">{{ alertCode }}</pre>
+    </VCol>
+    <VCol
+      cols="12"
+      md="4"
+    >
+      <VCard title="Props">
+        <VTextField
+          :model-value="alertOptions.title"
+          label="Title"
+          @change="alertOptions.title = $event.target.value"
+        />
+        <VTextField
+          :model-value="alertOptions.text"
+          label="Text"
+          @change="alertOptions.text = $event.target.value"
+        />
+        <VTextField
+          :model-value="alertOptions.options.width"
+          label="Width"
+          @change="alertOptions.options.width = $event.target.value"
+        />
+        <VSelect
+          v-model="alertOptions.options.textAlign"
+          :items="['left', 'center', 'right']"
+          label="Text Align"
+        />
+        <VSelect
+          v-model="alertOptions.options.buttonAlign"
+          :items="['start', 'center', 'end']"
+          label="Buttons Align"
+        />
+        <VSelect
+          v-model="alertOptions.color"
+          :items="['primary', 'secondary', 'success', 'error', 'purple']"
+          label="Color"
+        />
+        <VSwitch
+          v-model="alertOptions.options.divider"
+          label="Divider"
+        />
+        <VSwitch
+          v-model="alertOptions.options.persistent"
+          label="Persistent"
+        />
+        <VCardActions>
+          <VBtn
+            block
+            text="Alert"
+            variant="outlined"
+            @click="onOpenAlert"
+          />
+        </VCardActions>
+      </VCard>
+    </VCol>
+  </VRow>
+</template>
+
+<script lang="ts" setup>
+const notifier = useNotifier()
+
+const alertOptions = reactive(({
+  title: 'Are you sure?',
+  text: 'Do you want to continue?',
+  color: 'primary',
+  onSubmit: () => {},
+  options: {
+    divider: true,
+    textAlign: undefined,
+    buttonAlign: undefined,
+    persistent: false,
+    width: 400,
+  },
+}))
+
+watch(alertOptions, () => {
+  onOpenAlert()
+})
+
+const alertCode = computed(() => `
+const notifier = useNotifier()
+
+notifier.alert(${useObjectToString(alertOptions)})`)
+
+function onOpenAlert() {
+  notifier.alert({
+    ...alertOptions,
+    onSubmit: (data: any) => console.log('Submit', data),
+  })
+}
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/components/examples/confirm.vue b/components/examples/confirm.vue
new file mode 100644
index 0000000..9ebe028
--- /dev/null
+++ b/components/examples/confirm.vue
@@ -0,0 +1,111 @@
+<template>
+  <VRow
+    align="center"
+    justify="center"
+  >
+    <VCol
+      cols="12"
+      md="8"
+      class="d-flex justify-center"
+    >
+      <pre class="overflow-auto">
+        {{ confirmCode }}
+      </pre>
+    </VCol>
+    <VCol
+      cols="12"
+      md="4"
+    >
+      <VCard title="Props">
+        <VTextField
+          :model-value="confirmOptions.title"
+          label="Title"
+          @change="confirmOptions.title = $event.target.value"
+        />
+        <VTextField
+          :model-value="confirmOptions.text"
+          label="Text"
+          @change="confirmOptions.text = $event.target.value"
+        />
+        <VTextField
+          :model-value="confirmOptions.options.width"
+          label="Width"
+          @change="confirmOptions.options.width = $event.target.value"
+        />
+        <VSelect
+          v-model="confirmOptions.options.textAlign"
+          :items="['left', 'center', 'right']"
+          label="Text Align"
+        />
+        <VSelect
+          v-model="confirmOptions.options.buttonAlign"
+          :items="['start', 'center', 'end']"
+          label="Buttons Align"
+        />
+        <VSelect
+          v-model="confirmOptions.color"
+          :items="['primary', 'secondary', 'success', 'error', 'purple']"
+          label="Color"
+        />
+        <VSwitch
+          v-model="confirmOptions.options.divider"
+          label="Divider"
+        />
+        <VSwitch
+          v-model="confirmOptions.options.persistent"
+          label="Persistent"
+        />
+        <VCardActions>
+          <VBtn
+            block
+            text="Confirm"
+            variant="outlined"
+            @click="onOpenConfirm"
+          />
+        </VCardActions>
+      </VCard>
+    </VCol>
+  </VRow>
+</template>
+
+<script lang="ts" setup>
+const notifier = useNotifier()
+
+const confirmOptions = reactive(({
+  title: 'Are you sure?',
+  text: 'Do you want to continue?',
+  color: 'primary',
+  onSubmit: () => {},
+  onClose: () => {},
+  options: {
+    divider: true,
+    textAlign: undefined,
+    buttonAlign: undefined,
+    persistent: false,
+    width: 400,
+  },
+}))
+
+watch(confirmOptions, () => {
+  onOpenConfirm()
+})
+
+function onOpenConfirm() {
+  notifier.confirm({
+    ...confirmOptions,
+    onSubmit: (data: any) => {
+      console.log('Submit', data)
+    },
+    onClose: () => console.log('Cancel'),
+  })
+}
+
+const confirmCode = computed(() => `
+const notifier = useNotifier()
+
+notifier.confirm(${useObjectToString(confirmOptions)})`)
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/components/examples/dialog.vue b/components/examples/dialog.vue
new file mode 100644
index 0000000..f011d34
--- /dev/null
+++ b/components/examples/dialog.vue
@@ -0,0 +1,86 @@
+<template>
+  <VRow
+    align="center"
+    justify="center"
+  >
+    <VCol
+      cols="12"
+      md="8"
+      class="d-flex justify-center"
+    >
+      <pre class="overflow-auto">{{ dialogCode }}</pre>
+    </VCol>
+    <VCol
+      cols="12"
+      md="4"
+    >
+      <VCard title="Props">
+        <VTextField
+          :model-value="dialogOptions.msg"
+          label="Component prop"
+          @change="dialogOptions.msg = $event.target.value"
+        />
+      </VCard>
+      <VCard title="Options">
+        <VTextField
+          :model-value="dialogOptions.options.title"
+          label="Title"
+          @change="dialogOptions.options.title = $event.target.value"
+        />
+        <VTextField
+          :model-value="dialogOptions.options.width"
+          label="Width"
+          @change="dialogOptions.options.width = $event.target.value"
+        />
+        <VBtn
+          block
+          text="Component"
+          variant="outlined"
+          @click="onOpenDialog"
+        />
+      </VCard>
+    </VCol>
+  </VRow>
+</template>
+
+<script lang="ts" setup>
+import { Test } from '#components'
+
+const notifier = useNotifier()
+
+const dialogOptions = reactive(({
+  msg: 'World',
+  onSubmit: () => {},
+  onClose: () => {},
+  options: {
+    title: '',
+    width: 500,
+  },
+}))
+
+function onOpenDialog() {
+  notifier.dialog(Test, {
+    ...dialogOptions,
+    onSubmit(data: any) {
+      console.log('Submit', data)
+    },
+    onClose() {
+      console.log('Cancel')
+    },
+  })
+}
+
+const dialogCode = computed(() => `
+//import { Test } from '#components' // Using Nuxt 
+import { Test } from './components/Test.vue' // Using Vue 3
+
+
+const notifier = useNotifier()
+
+notifier.dialog(Test, ${useObjectToString(dialogOptions)})
+`)
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/components/examples/input.vue b/components/examples/input.vue
new file mode 100644
index 0000000..32a7619
--- /dev/null
+++ b/components/examples/input.vue
@@ -0,0 +1,95 @@
+<template>
+  <VRow
+    align="center"
+    justify="center"
+  >
+    <VCol
+      cols="12"
+      md="4"
+    >
+      <VBtn
+        v-notifier-confirm="{
+          ...confirmDirectyOptions,
+          onSubmit() {
+            console.log('Submit')
+          },
+        }"
+        text="Quick confirm"
+        variant="outlined"
+      />
+      <pre class="overflow-auto">
+        {{ confirmDirectyCode }}
+      </pre>
+    </VCol>
+    <VCol
+      cols="12"
+      md="4"
+    >
+      <VBtn
+        v-notifier-input="{
+          ...confirmDirectyOptions,
+          onSubmit(data: any) {
+            console.log('Submit', data)
+          },
+        }"
+        text="Input Inline"
+        variant="outlined"
+      />
+      <pre class="overflow-auto">
+        {{ inputDirectyCode }}
+      </pre>
+    </VCol>
+    <VCol
+      cols="12"
+      md="4"
+    >
+      <VCard title="Props">
+        <VTextField
+          :model-value="confirmDirectyOptions.title"
+          label="Title"
+          @change="confirmDirectyOptions.title = $event.target.value"
+        />
+        <VTextField
+          :model-value="confirmDirectyOptions.text"
+          label="Text"
+          @change="confirmDirectyOptions.text = $event.target.value"
+        />
+        <VSelect
+          v-model="confirmDirectyOptions.color"
+          :items="['primary', 'secondary', 'success', 'error', 'purple']"
+          label="Color"
+        />
+      </VCard>
+    </VCol>
+  </VRow>
+</template>
+
+<script lang="ts" setup>
+const confirmDirectyOptions = reactive(({
+  title: 'Are you sure?',
+  text: 'Do you want to continue?',
+  color: 'primary',
+  onSubmit: () => {},
+  onClose: () => {},
+}))
+
+const confirmDirectyCode = computed(() => `
+<VBtn
+  v-notifier-confirm="${useObjectToString(confirmDirectyOptions)}"
+  text="Quick confirm"
+  variant="outlined"
+/>
+`)
+
+const inputDirectyCode = computed(() => `
+<VBtn
+  v-notifier-input="${useObjectToString(confirmDirectyOptions)}"
+  text="Input Inline"
+  variant="outlined"
+/>
+`)
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/components/examples/toast.vue b/components/examples/toast.vue
new file mode 100644
index 0000000..cab99b9
--- /dev/null
+++ b/components/examples/toast.vue
@@ -0,0 +1,148 @@
+<template>
+  <VRow>
+    <VCol
+      cols="12"
+      md="8"
+      class="d-flex align-center justify-center"
+    >
+      <pre class="overflow-auto">{{ toastCode }}</pre>
+    </VCol>
+    <VCol
+      cols="12"
+      md="4"
+    >
+      <VCard title="Props">
+        <VTextField
+          :model-value="state.title"
+          label="Title"
+          @change="state.title = $event.target.value"
+        />
+        <VTextField
+          :model-value="state.text"
+          label="Text"
+          @change="state.text = $event.target.value"
+        />
+        <VTextField
+          :model-value="state.icon"
+          label="Icon"
+          @change="state.icon = $event.target.value"
+        />
+        <VSelect
+          v-model="state.color"
+          clearable
+          :items="['primary', 'secondary', 'success', 'error', 'purple']"
+          label="Color"
+        />
+        <VSelect
+          v-model="state.type"
+          clearable
+          :items="['success', 'info', 'warning', 'error']"
+          label="Type"
+        />
+      </VCard>
+      <VCard title="Options">
+        <VSelect
+          v-model="notifier.config.toast.location"
+          :items="['top', 'bottom', 'top left', 'top right', 'bottom left', 'bottom right']"
+          label="Location"
+        />
+
+        <VSlider
+          v-model.number="notifier.config.toast.max"
+          label="Max items"
+          min="1"
+          max="10"
+          step="1"
+          thumb-label="always"
+          class="mt-5"
+        />
+        <VSlider
+          v-model.number="notifier.config.toast.timeout"
+          label="Timeout"
+          min="3000"
+          max="10000"
+          step="1000"
+          thumb-label="always"
+          class="mt-5"
+        >
+          <template #thumb-label="{ modelValue }">
+            {{ modelValue / 1000 }}s
+          </template>
+        </VSlider>
+        <VListItem
+          title="Sequential Closing"
+        >
+          <template #append>
+            <VSwitch
+              v-model="notifier.config.toast.sequentialClosing"
+              hide-details
+            />
+          </template>
+        </VListItem>
+        <VCardActions>
+          <VBtn
+            block
+            :color="state.color"
+            text="Show Toast"
+            variant="outlined"
+            @click="onOpenToast"
+          />
+        </VCardActions>
+      </VCard>
+    </VCol>
+  </VRow>
+</template>
+
+<script lang="ts" setup>
+const notifier = useNotifier()
+
+const state = reactive(({
+  title: undefined,
+  text: 'This is toast content',
+  icon: undefined,
+  color: undefined,
+  type: undefined,
+  onClick: () => { },
+  onClose: () => { },
+}))
+
+const sample = reactive({
+  items: ['Hello there! 👋',
+    'I am a Vuetify Toast!',
+    'Integrated with Vuetify for seamless styling.',
+    'I will appear sequentially, one after another.',
+    'I will close automatically in 5 seconds...',
+    '...unless you close me first! 😉',
+    'Up to 5 toasts can be displayed at once.',
+    'Click me to trigger an event!',
+    'Closing me also triggers an event.',
+    'Customize me with icons, actions, and more!',
+  ],
+  types: ['success', 'info', 'warning', 'error'],
+  index: 0,
+  edit: false,
+})
+
+watch(state, () => {
+  onOpenToast()
+})
+
+function onOpenToast() {
+  if (!sample.edit) {
+    notifier.toast({ text: sample.items[sample.index++] })
+    if (sample.index >= sample.items.length) sample.edit = true
+  }
+  else {
+    notifier.toast(state)
+  }
+}
+
+const toastCode = computed(() => {
+  return `
+const notifier = useNotifier()
+
+notifier.toast(${useObjectToString(state)})`
+})
+</script>
+
+<style lang="scss"></style>
diff --git a/composables/useObjectToString.ts b/composables/useObjectToString.ts
new file mode 100644
index 0000000..b190278
--- /dev/null
+++ b/composables/useObjectToString.ts
@@ -0,0 +1,10 @@
+export const useObjectToString = (obj: any) => {
+  return JSON.stringify(obj, (key, value) => {
+    if (value) {
+      return typeof value === 'function' ? key : value
+    }
+  }, 2)
+    .replace(': "onSubmit"', ': (data) => console.log("Submit data", data)')
+    .replace(': "onClick"', ': () => console.log("Toast clicked")')
+    .replace(': "onClose"', ': () => console.log("Close")')
+}