feat: rewrite to use app config and rework docs (#143)

Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: Sébastien Chopin <seb@nuxt.com>

docs/content/5.overlays/1.modal.md

@@ -0,0 +1,72 @@
+---
+github: true
+headlessui:
+  label: 'Dialog'
+  to: 'https://headlessui.com/vue/dialog'
+---
+
+## Usage
+
+::component-example
+#default
+:modal-example-basic
+
+#code
+```vue
+<script setup>
+const open = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="open = true" />
+
+    <UModal v-model="open">
+      <!-- Content -->
+    </UModal>
+  </div>
+</template>
+```
+::
+
+You can put a [Card](/layout/card) component inside your Modal to handle forms and take advantage of `header` and `footer` slots:
+
+::component-example
+#default
+:modal-example-card
+
+#code
+```vue
+<script setup>
+const open = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="open = true" />
+
+    <UModal v-model="open">
+      <UCard :ui="{ divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <!-- Content -->
+        </template>
+
+        <!-- Content -->
+
+        <template #footer>
+          <!-- Content -->
+        </template>
+      </UCard>
+    </UModal>
+  </div>
+</template>
+```
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset