From b0b1cd1f0d214393a53da14c61b899b4a334a821 Mon Sep 17 00:00:00 2001
From: shadcn <m@shadcn.com>
Date: Mon, 13 Oct 2025 11:57:20 +0400
Subject: [PATCH] feat: add dropdown menu dialog example (#8438)

* feat: add dropdown menu dialog example

* chore: remove dropdown-dialog
---
 .../content/docs/components/dropdown-menu.mdx |  16 +++
 .../new-york-v4/dropdown-menu-dialog.json     |  19 +++
 .../public/r/styles/new-york-v4/registry.json |  17 +++
 apps/v4/registry.json                         |  17 +++
 apps/v4/registry/__index__.tsx                |  18 +++
 .../examples/dropdown-menu-dialog.tsx         | 115 ++++++++++++++++++
 apps/v4/registry/registry-examples.ts         |  17 +++
 .../new-york-v4/dropdown-menu-dialog.json     |  19 +++
 .../public/r/styles/new-york-v4/registry.json |  17 +++
 9 files changed, 255 insertions(+)
 create mode 100644 apps/v4/public/r/styles/new-york-v4/dropdown-menu-dialog.json
 create mode 100644 apps/v4/registry/new-york-v4/examples/dropdown-menu-dialog.tsx
 create mode 100644 apps/www/public/r/styles/new-york-v4/dropdown-menu-dialog.json

diff --git a/apps/v4/content/docs/components/dropdown-menu.mdx b/apps/v4/content/docs/components/dropdown-menu.mdx
index 162f7d7a51..39af9d2b3f 100644
--- a/apps/v4/content/docs/components/dropdown-menu.mdx
+++ b/apps/v4/content/docs/components/dropdown-menu.mdx
@@ -93,3 +93,19 @@ import {
   name="dropdown-menu-radio-group"
   description="A dropdown menu with radio items."
 />
+
+### Dialog
+
+This example shows how to open a dialog from a dropdown menu.
+
+Use `modal={false}` on the `DropdownMenu` component.
+
+```tsx showLineNumbers
+<DropdownMenu modal={false}>
+  <DropdownMenuTrigger asChild>
+    <Button variant="outline">Actions</Button>
+  </DropdownMenuTrigger>
+</DropdownMenu>
+```
+
+<ComponentPreview name="dropdown-menu-dialog" />
diff --git a/apps/v4/public/r/styles/new-york-v4/dropdown-menu-dialog.json b/apps/v4/public/r/styles/new-york-v4/dropdown-menu-dialog.json
new file mode 100644
index 0000000000..061e6f697c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/dropdown-menu-dialog.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu-dialog",
+  "type": "registry:example",
+  "registryDependencies": [
+    "dropdown-menu",
+    "dialog",
+    "button",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/dropdown-menu-dialog.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MoreHorizontalIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/new-york-v4/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/new-york-v4/ui/field\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport { Textarea } from \"@/registry/new-york-v4/ui/textarea\"\n\nexport default function DropdownMenuDialog() {\n  const [showNewDialog, setShowNewDialog] = useState(false)\n  const [showShareDialog, setShowShareDialog] = useState(false)\n\n  return (\n    <>\n      <DropdownMenu modal={false}>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" aria-label=\"Open menu\" size=\"icon-sm\">\n            <MoreHorizontalIcon />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-40\" align=\"end\">\n          <DropdownMenuLabel>File Actions</DropdownMenuLabel>\n          <DropdownMenuGroup>\n            <DropdownMenuItem onSelect={() => setShowNewDialog(true)}>\n              New File...\n            </DropdownMenuItem>\n            <DropdownMenuItem onSelect={() => setShowShareDialog(true)}>\n              Share...\n            </DropdownMenuItem>\n            <DropdownMenuItem disabled>Download</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n      <Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Create New File</DialogTitle>\n            <DialogDescription>\n              Provide a name for your new file. Click create when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <FieldGroup className=\"pb-3\">\n            <Field>\n              <FieldLabel htmlFor=\"filename\">File Name</FieldLabel>\n              <Input id=\"filename\" name=\"filename\" placeholder=\"document.txt\" />\n            </Field>\n          </FieldGroup>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button type=\"submit\">Create</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n      <Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Share File</DialogTitle>\n            <DialogDescription>\n              Anyone with the link will be able to view this file.\n            </DialogDescription>\n          </DialogHeader>\n          <FieldGroup className=\"py-3\">\n            <Field>\n              <Label htmlFor=\"email\">Email Address</Label>\n              <Input\n                id=\"email\"\n                name=\"email\"\n                type=\"email\"\n                placeholder=\"shadcn@vercel.com\"\n                autoComplete=\"off\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"message\">Message (Optional)</FieldLabel>\n              <Textarea\n                id=\"message\"\n                name=\"message\"\n                placeholder=\"Check out this file\"\n              />\n            </Field>\n          </FieldGroup>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button type=\"submit\">Send Invite</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/registry.json b/apps/v4/public/r/styles/new-york-v4/registry.json
index 50a41f14fd..04d5cd42ac 100644
--- a/apps/v4/public/r/styles/new-york-v4/registry.json
+++ b/apps/v4/public/r/styles/new-york-v4/registry.json
@@ -4710,6 +4710,23 @@
         }
       ]
     },
+    {
+      "name": "dropdown-menu-dialog",
+      "type": "registry:example",
+      "registryDependencies": [
+        "dropdown-menu",
+        "dialog",
+        "button",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/dropdown-menu-dialog.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
     {
       "name": "hover-card-demo",
       "type": "registry:example",
diff --git a/apps/v4/registry.json b/apps/v4/registry.json
index 50a41f14fd..04d5cd42ac 100644
--- a/apps/v4/registry.json
+++ b/apps/v4/registry.json
@@ -4710,6 +4710,23 @@
         }
       ]
     },
+    {
+      "name": "dropdown-menu-dialog",
+      "type": "registry:example",
+      "registryDependencies": [
+        "dropdown-menu",
+        "dialog",
+        "button",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/dropdown-menu-dialog.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
     {
       "name": "hover-card-demo",
       "type": "registry:example",
diff --git a/apps/v4/registry/__index__.tsx b/apps/v4/registry/__index__.tsx
index 146297a4c0..3fadf601d8 100644
--- a/apps/v4/registry/__index__.tsx
+++ b/apps/v4/registry/__index__.tsx
@@ -5804,6 +5804,24 @@ export const Index: Record<string, any> = {
     categories: undefined,
     meta: undefined,
   },
+  "dropdown-menu-dialog": {
+    name: "dropdown-menu-dialog",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["dropdown-menu","dialog","button","input","label"],
+    files: [{
+      path: "registry/new-york-v4/examples/dropdown-menu-dialog.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/dropdown-menu-dialog.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
   "hover-card-demo": {
     name: "hover-card-demo",
     description: "",
diff --git a/apps/v4/registry/new-york-v4/examples/dropdown-menu-dialog.tsx b/apps/v4/registry/new-york-v4/examples/dropdown-menu-dialog.tsx
new file mode 100644
index 0000000000..568efb60fa
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/dropdown-menu-dialog.tsx
@@ -0,0 +1,115 @@
+"use client"
+
+import { useState } from "react"
+import { MoreHorizontalIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/registry/new-york-v4/ui/dialog"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import { Field, FieldGroup, FieldLabel } from "@/registry/new-york-v4/ui/field"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import { Textarea } from "@/registry/new-york-v4/ui/textarea"
+
+export default function DropdownMenuDialog() {
+  const [showNewDialog, setShowNewDialog] = useState(false)
+  const [showShareDialog, setShowShareDialog] = useState(false)
+
+  return (
+    <>
+      <DropdownMenu modal={false}>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" aria-label="Open menu" size="icon-sm">
+            <MoreHorizontalIcon />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-40" align="end">
+          <DropdownMenuLabel>File Actions</DropdownMenuLabel>
+          <DropdownMenuGroup>
+            <DropdownMenuItem onSelect={() => setShowNewDialog(true)}>
+              New File...
+            </DropdownMenuItem>
+            <DropdownMenuItem onSelect={() => setShowShareDialog(true)}>
+              Share...
+            </DropdownMenuItem>
+            <DropdownMenuItem disabled>Download</DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Create New File</DialogTitle>
+            <DialogDescription>
+              Provide a name for your new file. Click create when you&apos;re
+              done.
+            </DialogDescription>
+          </DialogHeader>
+          <FieldGroup className="pb-3">
+            <Field>
+              <FieldLabel htmlFor="filename">File Name</FieldLabel>
+              <Input id="filename" name="filename" placeholder="document.txt" />
+            </Field>
+          </FieldGroup>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button type="submit">Create</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      <Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Share File</DialogTitle>
+            <DialogDescription>
+              Anyone with the link will be able to view this file.
+            </DialogDescription>
+          </DialogHeader>
+          <FieldGroup className="py-3">
+            <Field>
+              <Label htmlFor="email">Email Address</Label>
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                placeholder="shadcn@vercel.com"
+                autoComplete="off"
+              />
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="message">Message (Optional)</FieldLabel>
+              <Textarea
+                id="message"
+                name="message"
+                placeholder="Check out this file"
+              />
+            </Field>
+          </FieldGroup>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button type="submit">Send Invite</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
diff --git a/apps/v4/registry/registry-examples.ts b/apps/v4/registry/registry-examples.ts
index 7082a11411..246b041bb0 100644
--- a/apps/v4/registry/registry-examples.ts
+++ b/apps/v4/registry/registry-examples.ts
@@ -1300,6 +1300,23 @@ export const examples: Registry["items"] = [
       },
     ],
   },
+  {
+    name: "dropdown-menu-dialog",
+    type: "registry:example",
+    registryDependencies: [
+      "dropdown-menu",
+      "dialog",
+      "button",
+      "input",
+      "label",
+    ],
+    files: [
+      {
+        path: "examples/dropdown-menu-dialog.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
   {
     name: "hover-card-demo",
     type: "registry:example",
diff --git a/apps/www/public/r/styles/new-york-v4/dropdown-menu-dialog.json b/apps/www/public/r/styles/new-york-v4/dropdown-menu-dialog.json
new file mode 100644
index 0000000000..061e6f697c
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/dropdown-menu-dialog.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu-dialog",
+  "type": "registry:example",
+  "registryDependencies": [
+    "dropdown-menu",
+    "dialog",
+    "button",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/dropdown-menu-dialog.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MoreHorizontalIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/new-york-v4/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/new-york-v4/ui/field\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport { Textarea } from \"@/registry/new-york-v4/ui/textarea\"\n\nexport default function DropdownMenuDialog() {\n  const [showNewDialog, setShowNewDialog] = useState(false)\n  const [showShareDialog, setShowShareDialog] = useState(false)\n\n  return (\n    <>\n      <DropdownMenu modal={false}>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" aria-label=\"Open menu\" size=\"icon-sm\">\n            <MoreHorizontalIcon />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-40\" align=\"end\">\n          <DropdownMenuLabel>File Actions</DropdownMenuLabel>\n          <DropdownMenuGroup>\n            <DropdownMenuItem onSelect={() => setShowNewDialog(true)}>\n              New File...\n            </DropdownMenuItem>\n            <DropdownMenuItem onSelect={() => setShowShareDialog(true)}>\n              Share...\n            </DropdownMenuItem>\n            <DropdownMenuItem disabled>Download</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n      <Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Create New File</DialogTitle>\n            <DialogDescription>\n              Provide a name for your new file. Click create when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <FieldGroup className=\"pb-3\">\n            <Field>\n              <FieldLabel htmlFor=\"filename\">File Name</FieldLabel>\n              <Input id=\"filename\" name=\"filename\" placeholder=\"document.txt\" />\n            </Field>\n          </FieldGroup>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button type=\"submit\">Create</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n      <Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Share File</DialogTitle>\n            <DialogDescription>\n              Anyone with the link will be able to view this file.\n            </DialogDescription>\n          </DialogHeader>\n          <FieldGroup className=\"py-3\">\n            <Field>\n              <Label htmlFor=\"email\">Email Address</Label>\n              <Input\n                id=\"email\"\n                name=\"email\"\n                type=\"email\"\n                placeholder=\"shadcn@vercel.com\"\n                autoComplete=\"off\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"message\">Message (Optional)</FieldLabel>\n              <Textarea\n                id=\"message\"\n                name=\"message\"\n                placeholder=\"Check out this file\"\n              />\n            </Field>\n          </FieldGroup>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button type=\"submit\">Send Invite</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/registry.json b/apps/www/public/r/styles/new-york-v4/registry.json
index 50a41f14fd..04d5cd42ac 100644
--- a/apps/www/public/r/styles/new-york-v4/registry.json
+++ b/apps/www/public/r/styles/new-york-v4/registry.json
@@ -4710,6 +4710,23 @@
         }
       ]
     },
+    {
+      "name": "dropdown-menu-dialog",
+      "type": "registry:example",
+      "registryDependencies": [
+        "dropdown-menu",
+        "dialog",
+        "button",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/dropdown-menu-dialog.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
     {
       "name": "hover-card-demo",
       "type": "registry:example",