diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 9466ea4a..5478e79c 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -6,6 +6,7 @@ module.exports = {
   extends: '@antfu',
 
   rules: {
+    'vue/one-component-per-file': 'off',
     'vue/no-reserved-component-names': 'off',
     'symbol-description': 'off',
     'no-console': 'warn',
diff --git a/apps/www/src/App.vue b/apps/www/src/App.vue
index 6a304036..4f97a104 100644
--- a/apps/www/src/App.vue
+++ b/apps/www/src/App.vue
@@ -1,12 +1,18 @@
 <script setup lang="ts">
 import AccordionDemo from '@/registry/default/examples/AccordionDemo.vue'
 import PopoverDemo from '@/registry/default/examples/PopoverDemo.vue'
+import DialogDemo from '@/registry/default/examples/DialogDemo.vue'
+import AlertDialogDemo from '@/registry/default/examples/AlertDialogDemo.vue'
 </script>
 
 <template>
-  <div class="p-8 grid gap-8 grid-cols-3 place-items-center">
+  <div class="p-8 grid gap-12 grid-cols-3 place-items-center">
     <AccordionDemo class="max-w-[20rem]" />
 
     <PopoverDemo />
+
+    <DialogDemo />
+
+    <AlertDialogDemo />
   </div>
 </template>