docs: update

docs/content/2.components/modal.md

@@ -1,90 +1,18 @@
 ---
 description: Display a modal within your application.
 links:
-  - label: 'Dialog'
-    icon: i-simple-icons-headlessui
-    to: 'https://headlessui.com/vue/dialog'
+  - label: Radix Vue
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/dialog.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/overlays/Modal.vue
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Modal.vue
 ---
 
 ## Usage
 
-Use a `v-model` to control the Modal state.
+## Examples
 
-:component-example{component="modal-example-basic"}
+:component-api
 
-You can put a [Card](/components/card) component inside your Modal to handle forms and take advantage of `header` and `footer` slots:
-
-:component-example{component="modal-example-card"}
-
-### Disable overlay
-
-Set the `overlay` prop to `false` to disable it.
-
-:component-example{component="modal-example-disable-overlay"}
-
-### Disable transition
-
-Set the `transition` prop to `false` to disable it.
-
-:component-example{component="modal-example-disable-transition"}
-
-### Prevent close
-
-Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut. A `close-prevented` event will be emitted when the user tries to close the modal.
-
-:component-example{component="modal-example-prevent-close"}
-
-You can still handle the `esc` shortcut yourself by using our [defineShortcuts](/getting-started/shortcuts#defineshortcuts) composable.
-
-```vue
-<script setup lang="ts">
-const isOpen = ref(false)
-
-defineShortcuts({
-  escape: {
-    usingInput: true,
-    whenever: [isOpen],
-    handler: () => { isOpen.value = false }
-  }
-})
-</script>
-```
-
-### Fullscreen
-
-Set the `fullscreen` prop to `true` to enable it.
-
-:component-example{component="modal-example-fullscreen"}
-
-### Control programmatically :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
-
-First of all, add the `Modals` component to your app, preferably inside `app.vue`.
-
-```vue [app.vue]
-<template>
-  <div>
-    <UContainer>
-      <NuxtPage />
-    </UContainer>
-
-    <UModals />
-  </div>
-</template>
-```
-
-Then, you can use the `useModal` composable to control your modals within your app.
-
-:component-example{component="modal-example-composable"}
-
-Additionally, you can close the modal within the modal component by calling `modal.close()`. 
-
-## Props
-
-:component-props
-
-## Config
-
-:component-preset
+:component-theme