diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 41a34aa4..da6737cc 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -570,6 +570,13 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/DialogDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/DialogDemo.vue"],
     },
+    "DialogForm": {
+      name: "DialogForm",
+      type: "components:example",
+      registryDependencies: ["button","form","dialog","input","toast"],
+      component: () => import("../src/lib/registry/default/example/DialogForm.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/DialogForm.vue"],
+    },
     "DialogScrollBodyDemo": {
       name: "DialogScrollBodyDemo",
       type: "components:example",
@@ -2020,6 +2027,13 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/DialogDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/DialogDemo.vue"],
     },
+    "DialogForm": {
+      name: "DialogForm",
+      type: "components:example",
+      registryDependencies: ["button","form","dialog","input","toast"],
+      component: () => import("../src/lib/registry/new-york/example/DialogForm.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/DialogForm.vue"],
+    },
     "DialogScrollBodyDemo": {
       name: "DialogScrollBodyDemo",
       type: "components:example",
diff --git a/apps/www/src/content/docs/components/dialog.md b/apps/www/src/content/docs/components/dialog.md
index de448dbb..0b9c4e26 100644
--- a/apps/www/src/content/docs/components/dialog.md
+++ b/apps/www/src/content/docs/components/dialog.md
@@ -62,6 +62,10 @@ import {
 
 <ComponentPreview name="DialogScrollOverlayDemo" />
 
+### Dialog Form
+
+<ComponentPreview name="DialogForm" />
+
 ## Notes
 
 To activate the `Dialog` component from within a `Context Menu` or `Dropdown Menu`, you must encase the `Context Menu` or `Dropdown Menu` component in the `Dialog` component. For more information, refer to the linked issue [here](https://github.com/radix-ui/primitives/issues/1836).
diff --git a/apps/www/src/content/docs/dark-mode/vite.md b/apps/www/src/content/docs/dark-mode/vite.md
index a7795237..a0108c09 100644
--- a/apps/www/src/content/docs/dark-mode/vite.md
+++ b/apps/www/src/content/docs/dark-mode/vite.md
@@ -33,7 +33,7 @@ import { Button } from '@/components/ui/button'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 
 // Pass { disableTransition: false } to enable transitions
-const mode = useColorMode();
+const mode = useColorMode()
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/installation/nuxt.md b/apps/www/src/content/docs/installation/nuxt.md
index b698435e..89dce2d6 100644
--- a/apps/www/src/content/docs/installation/nuxt.md
+++ b/apps/www/src/content/docs/installation/nuxt.md
@@ -9,6 +9,12 @@ description: Install and configure Nuxt.
 
 Start by creating a new Nuxt project using `create-nuxt-app`:
 
+<Callout>
+
+  If you're using the JS template, `jsconfig.json` must exist for the CLI to run without errors.
+
+</Callout>
+
 ```bash
 npx nuxi@latest init my-app
 ```
@@ -82,7 +88,8 @@ export default defineNuxtModule<ShadcnVueOptions>({
     },
   },
   async setup({ componentDir, prefix }) {
-    const isVeeValidateExist = await tryResolveModule('vee-validate');
+    const veeValidate = await tryResolveModule('vee-validate');
+    const vaulVue = await tryResolveModule('vaul-vue');
 
     addComponentsDir(
       {
@@ -96,7 +103,7 @@ export default defineNuxtModule<ShadcnVueOptions>({
       }
     );
 
-    if (isVeeValidateExist !== undefined) {
+    if (veeValidate !== undefined) {
       addComponent({
         filePath: 'vee-validate',
         export: 'Form',
@@ -112,6 +119,17 @@ export default defineNuxtModule<ShadcnVueOptions>({
       });
     }
 
+    if(vaulVue !== undefined) {
+      ['DrawerPortal', 'DrawerTrigger', 'DrawerClose'].forEach((item) => {
+        addComponent({
+          filePath: 'vaul-vue',
+          export: item,
+          name: prefix + item,
+          priority: 999,
+        });
+      })
+    }
+
     addComponent({
       filePath: 'radix-vue',
       export: 'PaginationRoot',
diff --git a/apps/www/src/content/docs/introduction.md b/apps/www/src/content/docs/introduction.md
index e5957005..eabaa5e5 100644
--- a/apps/www/src/content/docs/introduction.md
+++ b/apps/www/src/content/docs/introduction.md
@@ -3,8 +3,8 @@ title: Introduction
 description: Re-usable components built with Radix Vue, and Tailwind CSS.
 ---
 
-<script setup >
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/default/ui/accordion'
+<script setup>
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/new-york/ui/accordion'
 </script>
 
 An unofficial, community-led [Vue](https://vuejs.org/) port of [shadcn/ui](https://ui.shadcn.com). We are not affiliated with [shadcn](https://twitter.com/shadcn), but we did get his blessing before creating a Vue version of his work. This project was born out of the need for a similar project for the Vue ecosystem.
@@ -19,8 +19,13 @@ Pick the components you need. Use the CLI to automatically add the components, o
 
 _Use this as a reference to build your own component libraries._
 
+<div class="[&>h2]:!mb-0">
+
 ## FAQ
 
+</div>
+
+<div class="[&_h3]:!mt-0">
 <Accordion  type="multiple">
 
 <AccordionItem value="faq-1">
@@ -58,3 +63,4 @@ But let us know if you do use it. We'd love to see what you build with it.
 </AccordionContent>
 </AccordionItem>
 </Accordion>
+</div>
diff --git a/apps/www/src/examples/cards/components/ReportAnIssue.vue b/apps/www/src/examples/cards/components/ReportAnIssue.vue
index 4d20ef55..7b01eb81 100644
--- a/apps/www/src/examples/cards/components/ReportAnIssue.vue
+++ b/apps/www/src/examples/cards/components/ReportAnIssue.vue
@@ -60,7 +60,7 @@ import { Textarea } from '@/lib/registry/new-york/ui/textarea'
           <Select default-value="2">
             <SelectTrigger
               id="security-level"
-              class="line-clamp-1 w-full truncate"
+              class="w-full truncate"
             >
               <SelectValue placeholder="Select level" />
             </SelectTrigger>
diff --git a/apps/www/src/lib/registry/default/example/DialogForm.vue b/apps/www/src/lib/registry/default/example/DialogForm.vue
new file mode 100644
index 00000000..b665dd87
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/DialogForm.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { h } from 'vue'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/lib/registry/default/ui/form'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/lib/registry/default/ui/dialog'
+import { Input } from '@/lib/registry/default/ui/input'
+import { toast } from '@/lib/registry/default/ui/toast'
+
+const formSchema = toTypedSchema(z.object({
+  username: z.string().min(2).max(50),
+}))
+
+function onSubmit(values: any) {
+  toast({
+    title: 'You submitted the following values:',
+    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
+  })
+}
+</script>
+
+<template>
+  <Dialog>
+    <DialogTrigger as-child>
+      <Button variant="outline">
+        Edit Profile
+      </Button>
+    </DialogTrigger>
+    <DialogContent class="sm:max-w-[425px]">
+      <DialogHeader>
+        <DialogTitle>Edit profile</DialogTitle>
+        <DialogDescription>
+          Make changes to your profile here. Click save when you're done.
+        </DialogDescription>
+      </DialogHeader>
+
+      <Form id="dialogForm" class="grid gap-4 py-4" :validation-schema="formSchema" @submit="onSubmit">
+        <FormField v-slot="{ componentField }" name="username">
+          <FormItem>
+            <FormLabel>Username</FormLabel>
+            <FormControl>
+              <Input type="text" placeholder="shadcn" v-bind="componentField" />
+            </FormControl>
+            <FormDescription>
+              This is your public display name.
+            </FormDescription>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+      </Form>
+
+      <DialogFooter>
+        <Button type="submit" form="dialogForm">
+          Save changes
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/DialogForm.vue b/apps/www/src/lib/registry/new-york/example/DialogForm.vue
new file mode 100644
index 00000000..fcaa9e2f
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/DialogForm.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { h } from 'vue'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/lib/registry/new-york/ui/form'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/lib/registry/new-york/ui/dialog'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { toast } from '@/lib/registry/new-york/ui/toast'
+
+const formSchema = toTypedSchema(z.object({
+  username: z.string().min(2).max(50),
+}))
+
+function onSubmit(values: any) {
+  toast({
+    title: 'You submitted the following values:',
+    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
+  })
+}
+</script>
+
+<template>
+  <Dialog>
+    <DialogTrigger as-child>
+      <Button variant="outline">
+        Edit Profile
+      </Button>
+    </DialogTrigger>
+    <DialogContent class="sm:max-w-[425px]">
+      <DialogHeader>
+        <DialogTitle>Edit profile</DialogTitle>
+        <DialogDescription>
+          Make changes to your profile here. Click save when you're done.
+        </DialogDescription>
+      </DialogHeader>
+
+      <Form id="dialogForm" class="grid gap-4 py-4" :validation-schema="formSchema" @submit="onSubmit">
+        <FormField v-slot="{ componentField }" name="username">
+          <FormItem>
+            <FormLabel>Username</FormLabel>
+            <FormControl>
+              <Input type="text" placeholder="shadcn" v-bind="componentField" />
+            </FormControl>
+            <FormDescription>
+              This is your public display name.
+            </FormDescription>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+      </Form>
+
+      <DialogFooter>
+        <Button type="submit" form="dialogForm">
+          Save changes
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>