From 1c6f588a7ed5787c5bb438885b74c380394fce26 Mon Sep 17 00:00:00 2001
From: Kevin Abatan <abatan.k@gmail.com>
Date: Thu, 25 Dec 2025 22:12:17 +0100
Subject: [PATCH 1/4] chore: add FRONTEND_PORT env var to allow worktrees

---
 apps/docs/app.config.ts | 5 ++++-
 apps/docs/tsconfig.json | 2 --
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/docs/app.config.ts b/apps/docs/app.config.ts
index b836b7e6..fa4254d6 100644
--- a/apps/docs/app.config.ts
+++ b/apps/docs/app.config.ts
@@ -20,7 +20,10 @@ export default defineConfig(
         }
       },
       vite: {
-        plugins: [tailwindcss()]
+        plugins: [tailwindcss()],
+        server: {
+          port: parseInt(process.env.FRONTEND_PORT || "5173", 10)
+        }
       }
     },
     {
diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json
index 047b6294..cbd39639 100644
--- a/apps/docs/tsconfig.json
+++ b/apps/docs/tsconfig.json
@@ -22,10 +22,8 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedIndexedAccess": true,
     "noImplicitOverride": true,
-    // Some stricter flags (disabled by default)
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noPropertyAccessFromIndexSignature": true,
     "baseUrl": ".",
     "paths": {
       "~/*": ["./src/*"]

From 395c6ea4988546b6ee6f22457443184d450948ab Mon Sep 17 00:00:00 2001
From: Kevin Abatan <abatan.k@gmail.com>
Date: Fri, 26 Dec 2025 04:19:30 +0100
Subject: [PATCH 2/4] chore: adding trees to gitignore

---
 .gitignore | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.gitignore b/.gitignore
index dc1b5dd4..ad08f192 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,6 +31,10 @@ Thumbs.db
 # Claude
 .claude
 logs
+trees/
+
+# Worktree environment configs
+**/.ports.env
 
 app.config.timestamp*
 

From 7d32ab55fff667fd4735d98adba9718e3476e609 Mon Sep 17 00:00:00 2001
From: Kevin Abatan <abatan.k@gmail.com>
Date: Sat, 27 Dec 2025 00:41:01 +0100
Subject: [PATCH 3/4] feat(dialog): sync dialog component from shadcn v4 with
 Kobalte primitives

---
 apps/docs/src/config/docs.ts                  |   4 +
 apps/docs/src/registry/__index__.tsx          |  42 ++++++
 apps/docs/src/registry/examples/_registry.ts  |  22 +++
 .../registry/examples/dialog-close-button.tsx |  64 +++++++++
 .../src/registry/examples/dialog-demo.tsx     |  47 +++++++
 apps/docs/src/registry/styles/style-lyra.css  |   4 +-
 apps/docs/src/registry/styles/style-maia.css  |   4 +-
 apps/docs/src/registry/styles/style-mira.css  |   4 +-
 apps/docs/src/registry/styles/style-nova.css  |   4 +-
 apps/docs/src/registry/styles/style-vega.css  |   4 +-
 apps/docs/src/registry/ui/_registry.ts        |  11 ++
 apps/docs/src/registry/ui/dialog.tsx          |  61 ++++++---
 .../src/routes/docs/components/dialog.mdx     | 127 ++++++++++++++++++
 13 files changed, 369 insertions(+), 29 deletions(-)
 create mode 100644 apps/docs/src/registry/examples/dialog-close-button.tsx
 create mode 100644 apps/docs/src/registry/examples/dialog-demo.tsx
 create mode 100644 apps/docs/src/routes/docs/components/dialog.mdx

diff --git a/apps/docs/src/config/docs.ts b/apps/docs/src/config/docs.ts
index a893e129..73671c84 100644
--- a/apps/docs/src/config/docs.ts
+++ b/apps/docs/src/config/docs.ts
@@ -51,6 +51,10 @@ export const docsConfig: Config = {
           title: "Checkbox",
           href: "/docs/components/checkbox"
         },
+        {
+          title: "Dialog",
+          href: "/docs/components/dialog"
+        },
         {
           title: "Dropdown Menu",
           href: "/docs/components/dropdown-menu"
diff --git a/apps/docs/src/registry/__index__.tsx b/apps/docs/src/registry/__index__.tsx
index 7eddc1d9..50532b90 100644
--- a/apps/docs/src/registry/__index__.tsx
+++ b/apps/docs/src/registry/__index__.tsx
@@ -88,6 +88,20 @@ export const Index: Record<string, any> = {
     categories: undefined,
     meta: undefined,
   },
+  "dialog": {
+    name: "dialog",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    component: lazy(() => import("~/registry/ui/dialog.tsx")),
+    files: [{
+      path: "registry/ui/dialog.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    categories: undefined,
+    meta: undefined,
+  },
   "dropdown-menu": {
     name: "dropdown-menu",
     description: "",
@@ -452,6 +466,34 @@ export const Index: Record<string, any> = {
     categories: undefined,
     meta: undefined,
   },
+  "dialog-demo": {
+    name: "dialog-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["dialog","button","field","input"],
+    component: lazy(() => import("~/registry/examples/dialog-demo.tsx")),
+    files: [{
+      path: "registry/examples/dialog-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    categories: undefined,
+    meta: undefined,
+  },
+  "dialog-close-button": {
+    name: "dialog-close-button",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["dialog","button"],
+    component: lazy(() => import("~/registry/examples/dialog-close-button.tsx")),
+    files: [{
+      path: "registry/examples/dialog-close-button.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    categories: undefined,
+    meta: undefined,
+  },
   "dropdown-menu-demo": {
     name: "dropdown-menu-demo",
     description: "",
diff --git a/apps/docs/src/registry/examples/_registry.ts b/apps/docs/src/registry/examples/_registry.ts
index 6cd90966..6cec6d68 100644
--- a/apps/docs/src/registry/examples/_registry.ts
+++ b/apps/docs/src/registry/examples/_registry.ts
@@ -188,6 +188,28 @@ export const examples: Registry["items"] = [
       }
     ]
   },
+  {
+    name: "dialog-demo",
+    type: "registry:example",
+    registryDependencies: ["dialog", "button", "field", "input"],
+    files: [
+      {
+        path: "examples/dialog-demo.tsx",
+        type: "registry:example"
+      }
+    ]
+  },
+  {
+    name: "dialog-close-button",
+    type: "registry:example",
+    registryDependencies: ["dialog", "button"],
+    files: [
+      {
+        path: "examples/dialog-close-button.tsx",
+        type: "registry:example"
+      }
+    ]
+  },
   {
     name: "dropdown-menu-demo",
     type: "registry:example",
diff --git a/apps/docs/src/registry/examples/dialog-close-button.tsx b/apps/docs/src/registry/examples/dialog-close-button.tsx
new file mode 100644
index 00000000..8a62a33b
--- /dev/null
+++ b/apps/docs/src/registry/examples/dialog-close-button.tsx
@@ -0,0 +1,64 @@
+import { Button } from "~/registry/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from "~/registry/ui/dialog"
+
+export default function DialogCloseButton() {
+  return (
+    <Dialog>
+      <DialogTrigger as={Button<"button">} variant="outline">
+        Share
+      </DialogTrigger>
+      <DialogContent class="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Share link</DialogTitle>
+          <DialogDescription>
+            Anyone who has this link will be able to view this.
+          </DialogDescription>
+        </DialogHeader>
+        <div class="flex items-center space-x-2">
+          <div class="grid flex-1 gap-2">
+            <label class="sr-only" for="link">
+              Link
+            </label>
+            <input
+              class="cn-input h-8 w-full"
+              data-slot="input"
+              id="link"
+              readonly
+              value="https://ui.shadcn.com/docs/installation"
+            />
+          </div>
+          <Button class="px-3" size="sm" type="submit">
+            <span class="sr-only">Copy</span>
+            <svg
+              class="size-4"
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect height="13" rx="2" ry="2" width="13" x="9" y="9" />
+              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+            </svg>
+          </Button>
+        </div>
+        <DialogFooter class="sm:justify-start">
+          <DialogClose as={Button<"button">} variant="secondary">
+            Close
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/docs/src/registry/examples/dialog-demo.tsx b/apps/docs/src/registry/examples/dialog-demo.tsx
new file mode 100644
index 00000000..7cac026a
--- /dev/null
+++ b/apps/docs/src/registry/examples/dialog-demo.tsx
@@ -0,0 +1,47 @@
+import { Button } from "~/registry/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from "~/registry/ui/dialog"
+import { Field, FieldGroup, FieldLabel } from "~/registry/ui/field"
+import { Input } from "~/registry/ui/input"
+
+export default function DialogDemo() {
+  return (
+    <Dialog>
+      <DialogTrigger as={Button<"button">} variant="outline">
+        Edit Profile
+      </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>
+        <FieldGroup class="py-4">
+          <Field orientation="horizontal">
+            <FieldLabel class="text-right" for="name">
+              Name
+            </FieldLabel>
+            <Input class="col-span-3" id="name" value="Pedro Duarte" />
+          </Field>
+          <Field orientation="horizontal">
+            <FieldLabel class="text-right" for="username">
+              Username
+            </FieldLabel>
+            <Input class="col-span-3" id="username" value="@peduarte" />
+          </Field>
+        </FieldGroup>
+        <DialogFooter>
+          <Button type="submit">Save changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/docs/src/registry/styles/style-lyra.css b/apps/docs/src/registry/styles/style-lyra.css
index 47ca492d..7e2d696c 100644
--- a/apps/docs/src/registry/styles/style-lyra.css
+++ b/apps/docs/src/registry/styles/style-lyra.css
@@ -417,11 +417,11 @@
 
   /* MARK: Dialog */
   .cn-dialog-overlay {
-    @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs;
+    @apply data-expanded:animate-in data-closed:animate-out data-closed:fade-out-0 data-expanded:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs;
   }
 
   .cn-dialog-content {
-    @apply bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-none p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm;
+    @apply bg-background data-expanded:animate-in data-closed:animate-out data-closed:fade-out-0 data-expanded:fade-in-0 data-closed:zoom-out-95 data-expanded:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-none p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm;
   }
 
   .cn-dialog-close {
diff --git a/apps/docs/src/registry/styles/style-maia.css b/apps/docs/src/registry/styles/style-maia.css
index 63ff199a..34d4855d 100644
--- a/apps/docs/src/registry/styles/style-maia.css
+++ b/apps/docs/src/registry/styles/style-maia.css
@@ -438,11 +438,11 @@
 
   /* MARK: Dialog */
   .cn-dialog-overlay {
-    @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs;
+    @apply data-expanded:animate-in data-closed:animate-out data-closed:fade-out-0 data-expanded:fade-in-0 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs;
   }
 
   .cn-dialog-content {
-    @apply bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/5 grid max-w-[calc(100%-2rem)] gap-6 rounded-4xl p-6 text-sm ring-1 duration-100 sm:max-w-md;
+    @apply bg-background data-expanded:animate-in data-closed:animate-out data-closed:fade-out-0 data-expanded:fade-in-0 data-closed:zoom-out-95 data-expanded:zoom-in-95 ring-foreground/5 grid max-w-[calc(100%-2rem)] gap-6 rounded-4xl p-6 text-sm ring-1 duration-100 sm:max-w-md;
   }
 
   .cn-dialog-close {
diff --git a/apps/docs/src/registry/styles/style-mira.css b/apps/docs/src/registry/styles/style-mira.css
index 41b0418d..8871b0e7 100644
--- a/apps/docs/src/registry/styles/style-mira.css
+++ b/apps/docs/src/registry/styles/style-mira.css
@@ -438,11 +438,11 @@
 
   /* MARK: Dialog */
   .cn-dialog-overlay {
-    @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs;
+    @apply data-expanded:animate-in data-closed:animate-out data-closed:fade-out-0 data-expanded:fade-in-0 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs;
   }
 
   .cn-dialog-content {
-    @apply bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm;
+    @apply bg-background data-expanded:animate-in data-closed:animate-out data-closed:fade-out-0 data-expanded:fade-in-0 data-closed:zoom-out-95 data-expanded:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm;
   }
 
   .cn-dialog-close {
diff --git a/apps/docs/src/registry/styles/style-nova.css b/apps/docs/src/registry/styles/style-nova.css
index 5aa1d70b..9f45d975 100644
--- a/apps/docs/src/registry/styles/style-nova.css
+++ b/apps/docs/src/registry/styles/style-nova.css
@@ -438,11 +438,11 @@
 
   /* MARK: Dialog */
   .cn-dialog-overlay {
-    @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs;
+    @apply data-expanded:animate-in data-closed:animate-out data-closed:fade-out-0 data-expanded:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs;
   }
 
   .cn-dialog-content {
-    @apply bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm;
+    @apply bg-background data-expanded:animate-in data-closed:animate-out data-closed:fade-out-0 data-expanded:fade-in-0 data-closed:zoom-out-95 data-expanded:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm;
   }
 
   .cn-dialog-close {
diff --git a/apps/docs/src/registry/styles/style-vega.css b/apps/docs/src/registry/styles/style-vega.css
index 76d971bf..a8044f9e 100644
--- a/apps/docs/src/registry/styles/style-vega.css
+++ b/apps/docs/src/registry/styles/style-vega.css
@@ -434,11 +434,11 @@
 
   /* MARK: Dialog */
   .cn-dialog-overlay {
-    @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs;
+    @apply data-expanded:animate-in data-closed:animate-out data-closed:fade-out-0 data-expanded:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs;
   }
 
   .cn-dialog-content {
-    @apply bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-6 rounded-xl p-6 text-sm ring-1 duration-100 sm:max-w-md;
+    @apply bg-background data-expanded:animate-in data-closed:animate-out data-closed:fade-out-0 data-expanded:fade-in-0 data-closed:zoom-out-95 data-expanded:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-6 rounded-xl p-6 text-sm ring-1 duration-100 sm:max-w-md;
   }
 
   .cn-dialog-close {
diff --git a/apps/docs/src/registry/ui/_registry.ts b/apps/docs/src/registry/ui/_registry.ts
index d4758d03..bc23e093 100644
--- a/apps/docs/src/registry/ui/_registry.ts
+++ b/apps/docs/src/registry/ui/_registry.ts
@@ -57,6 +57,17 @@ export const ui: Registry["items"] = [
       }
     ]
   },
+  {
+    name: "dialog",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    files: [
+      {
+        path: "ui/dialog.tsx",
+        type: "registry:ui"
+      }
+    ]
+  },
   {
     name: "dropdown-menu",
     type: "registry:ui",
diff --git a/apps/docs/src/registry/ui/dialog.tsx b/apps/docs/src/registry/ui/dialog.tsx
index f305f490..d296edc2 100644
--- a/apps/docs/src/registry/ui/dialog.tsx
+++ b/apps/docs/src/registry/ui/dialog.tsx
@@ -31,10 +31,7 @@ const DialogOverlay = <T extends ValidComponent = "div">(
   const [local, others] = splitProps(props as DialogOverlayProps, ["class"])
   return (
     <DialogPrimitive.Overlay
-      class={cn(
-        "data-[closed]:fade-out-0 data-[expanded]:fade-in-0 fixed inset-0 z-50 bg-black/50 data-[closed]:animate-out data-[expanded]:animate-in",
-        local.class
-      )}
+      class={cn("cn-dialog-overlay fixed inset-0 isolate z-50", local.class)}
       data-slot="dialog-overlay"
       {...others}
     />
@@ -62,7 +59,7 @@ const DialogContent = <T extends ValidComponent = "div">(
       <DialogOverlay />
       <DialogPrimitive.Content
         class={cn(
-          "data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[expanded]:fade-in-0 data-[expanded]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[closed]:animate-out data-[expanded]:animate-in sm:max-w-lg",
+          "cn-dialog-content fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2",
           local.class
         )}
         data-slot="dialog-content"
@@ -71,7 +68,7 @@ const DialogContent = <T extends ValidComponent = "div">(
         {local.children}
         <Show when={local.showCloseButton}>
           <DialogPrimitive.CloseButton
-            class="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[expanded]:bg-accent data-[expanded]:text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+            class="cn-dialog-close"
             data-slot="dialog-close"
           >
             <svg
@@ -84,8 +81,8 @@ const DialogContent = <T extends ValidComponent = "div">(
               viewBox="0 0 24 24"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <path d="M18 6l-12 12" />
-              <path d="M6 6l12 12" />
+              <path d="M18 6 6 18" />
+              <path d="m6 6 12 12" />
             </svg>
             <span class="sr-only">Close</span>
           </DialogPrimitive.CloseButton>
@@ -95,25 +92,49 @@ const DialogContent = <T extends ValidComponent = "div">(
   )
 }
 
-const DialogHeader: Component<ComponentProps<"div">> = (props) => {
+type DialogHeaderProps = ComponentProps<"div"> & {
+  class?: string | undefined
+}
+
+const DialogHeader: Component<DialogHeaderProps> = (props) => {
   const [local, others] = splitProps(props, ["class"])
   return (
     <div
-      class={cn("flex flex-col gap-2 text-center sm:text-left", local.class)}
+      class={cn("cn-dialog-header flex flex-col", local.class)}
       data-slot="dialog-header"
       {...others}
     />
   )
 }
 
-const DialogFooter: Component<ComponentProps<"div">> = (props) => {
-  const [local, others] = splitProps(props, ["class"])
+type DialogFooterProps = ComponentProps<"div"> & {
+  class?: string | undefined
+  children?: JSX.Element
+  showCloseButton?: boolean
+}
+
+const DialogFooter: Component<DialogFooterProps> = (rawProps) => {
+  const props = mergeProps({ showCloseButton: false }, rawProps)
+  const [local, others] = splitProps(props, ["class", "children", "showCloseButton"])
   return (
     <div
-      class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", local.class)}
+      class={cn(
+        "cn-dialog-footer flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        local.class
+      )}
       data-slot="dialog-footer"
       {...others}
-    />
+    >
+      {local.children}
+      <Show when={local.showCloseButton}>
+        <DialogPrimitive.CloseButton
+          class="cn-button cn-button-variant-outline cn-button-size-default"
+          data-slot="button"
+        >
+          Close
+        </DialogPrimitive.CloseButton>
+      </Show>
+    </div>
   )
 }
 
@@ -127,7 +148,7 @@ const DialogTitle = <T extends ValidComponent = "h2">(
   const [local, others] = splitProps(props as DialogTitleProps, ["class"])
   return (
     <DialogPrimitive.Title
-      class={cn("font-semibold text-lg leading-none", local.class)}
+      class={cn("cn-dialog-title", local.class)}
       data-slot="dialog-title"
       {...others}
     />
@@ -145,7 +166,7 @@ const DialogDescription = <T extends ValidComponent = "p">(
   const [local, others] = splitProps(props as DialogDescriptionProps, ["class"])
   return (
     <DialogPrimitive.Description
-      class={cn("text-muted-foreground text-sm", local.class)}
+      class={cn("cn-dialog-description", local.class)}
       data-slot="dialog-description"
       {...others}
     />
@@ -154,11 +175,13 @@ const DialogDescription = <T extends ValidComponent = "p">(
 
 export {
   Dialog,
-  DialogTrigger,
   DialogClose,
   DialogContent,
-  DialogHeader,
+  DialogDescription,
   DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
   DialogTitle,
-  DialogDescription
+  DialogTrigger
 }
diff --git a/apps/docs/src/routes/docs/components/dialog.mdx b/apps/docs/src/routes/docs/components/dialog.mdx
new file mode 100644
index 00000000..66f05751
--- /dev/null
+++ b/apps/docs/src/routes/docs/components/dialog.mdx
@@ -0,0 +1,127 @@
+---
+title: Dialog
+description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
+links:
+  doc: https://kobalte.dev/docs/core/components/dialog
+  api: https://kobalte.dev/docs/core/components/dialog#api-reference
+---
+
+::::tab-group[preview]
+:::tab[Preview]
+
+<ComponentPreview name="dialog-demo" />
+
+:::
+
+:::tab[Code]
+
+```file="~/registry/examples/dialog-demo" frame=none showLineNumbers
+
+```
+
+:::
+::::
+
+## Installation
+
+### CLI
+
+```package-exec
+solidui-cli@latest add dialog
+```
+
+### Manual
+
+Install the following dependencies:
+
+```package-install
+@kobalte/core
+```
+
+Copy and paste the following code into your project.
+
+```file="~/registry/ui/dialog.tsx" showLineNumbers
+
+```
+
+## Usage
+
+```tsx
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "~/components/ui/dialog";
+```
+
+```tsx
+<Dialog>
+  <DialogTrigger>Open</DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Are you absolutely sure?</DialogTitle>
+      <DialogDescription>
+        This action cannot be undone. This will permanently delete your account
+        and remove your data from our servers.
+      </DialogDescription>
+    </DialogHeader>
+  </DialogContent>
+</Dialog>
+```
+
+## Examples
+
+### Custom close button
+
+Use the `DialogClose` component to create a custom close button.
+
+::::tab-group[close-button]
+:::tab[Preview]
+
+<ComponentPreview name="dialog-close-button" />
+
+:::
+
+:::tab[Code]
+
+```file="~/registry/examples/dialog-close-button" frame=none showLineNumbers
+
+```
+
+:::
+::::
+
+## Notes
+
+To use 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. See the [Dropdown Menu Dialog example](/docs/components/dropdown-menu#dialog) for more details.
+
+```tsx title="components/example-dialog-context-menu.tsx" {1, 26}
+<Dialog>
+  <ContextMenu>
+    <ContextMenuTrigger>Right click</ContextMenuTrigger>
+    <ContextMenuContent>
+      <ContextMenuItem>Open</ContextMenuItem>
+      <ContextMenuItem>Download</ContextMenuItem>
+      <DialogTrigger as={ContextMenuItem}>
+        <span>Delete</span>
+      </DialogTrigger>
+    </ContextMenuContent>
+  </ContextMenu>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Are you absolutely sure?</DialogTitle>
+      <DialogDescription>
+        This action cannot be undone. Are you sure you want to permanently
+        delete this file from our servers?
+      </DialogDescription>
+    </DialogHeader>
+    <DialogFooter>
+      <Button type="submit">Confirm</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+```

From f0f490549ee486cd28b31b1b4df0c11f980c573f Mon Sep 17 00:00:00 2001
From: Kevin Abatan <abatan.k@gmail.com>
Date: Sun, 28 Dec 2025 02:21:52 +0100
Subject: [PATCH 4/4] fix: apply good classes

---
 apps/docs/src/registry/ui/dialog.tsx | 58 +++++++---------------------
 1 file changed, 14 insertions(+), 44 deletions(-)

diff --git a/apps/docs/src/registry/ui/dialog.tsx b/apps/docs/src/registry/ui/dialog.tsx
index d296edc2..1cb40e7b 100644
--- a/apps/docs/src/registry/ui/dialog.tsx
+++ b/apps/docs/src/registry/ui/dialog.tsx
@@ -3,8 +3,10 @@ import { mergeProps, Show, splitProps } from "solid-js"
 
 import * as DialogPrimitive from "@kobalte/core/dialog"
 import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import { X } from "lucide-solid"
 
 import { cn } from "~/lib/utils"
+import { Button } from "~/registry/ui/button"
 
 const Dialog: Component<DialogPrimitive.DialogRootProps> = (props) => (
   <DialogPrimitive.Root data-slot="dialog" {...props} />
@@ -59,7 +61,7 @@ const DialogContent = <T extends ValidComponent = "div">(
       <DialogOverlay />
       <DialogPrimitive.Content
         class={cn(
-          "cn-dialog-content fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2",
+          "cn-dialog-content -translate-x-1/2 -translate-y-1/2 fixed top-1/2 left-1/2 z-50 w-full",
           local.class
         )}
         data-slot="dialog-content"
@@ -68,22 +70,13 @@ const DialogContent = <T extends ValidComponent = "div">(
         {local.children}
         <Show when={local.showCloseButton}>
           <DialogPrimitive.CloseButton
+            as={Button}
             class="cn-dialog-close"
             data-slot="dialog-close"
+            size="icon"
+            variant="ghost"
           >
-            <svg
-              class="size-4"
-              fill="none"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path d="M18 6 6 18" />
-              <path d="m6 6 12 12" />
-            </svg>
+            <X />
             <span class="sr-only">Close</span>
           </DialogPrimitive.CloseButton>
         </Show>
@@ -92,11 +85,7 @@ const DialogContent = <T extends ValidComponent = "div">(
   )
 }
 
-type DialogHeaderProps = ComponentProps<"div"> & {
-  class?: string | undefined
-}
-
-const DialogHeader: Component<DialogHeaderProps> = (props) => {
+const DialogHeader: Component<ComponentProps<"div">> = (props) => {
   const [local, others] = splitProps(props, ["class"])
   return (
     <div
@@ -107,15 +96,8 @@ const DialogHeader: Component<DialogHeaderProps> = (props) => {
   )
 }
 
-type DialogFooterProps = ComponentProps<"div"> & {
-  class?: string | undefined
-  children?: JSX.Element
-  showCloseButton?: boolean
-}
-
-const DialogFooter: Component<DialogFooterProps> = (rawProps) => {
-  const props = mergeProps({ showCloseButton: false }, rawProps)
-  const [local, others] = splitProps(props, ["class", "children", "showCloseButton"])
+const DialogFooter: Component<ComponentProps<"div">> = (props) => {
+  const [local, others] = splitProps(props, ["class"])
   return (
     <div
       class={cn(
@@ -124,17 +106,7 @@ const DialogFooter: Component<DialogFooterProps> = (rawProps) => {
       )}
       data-slot="dialog-footer"
       {...others}
-    >
-      {local.children}
-      <Show when={local.showCloseButton}>
-        <DialogPrimitive.CloseButton
-          class="cn-button cn-button-variant-outline cn-button-size-default"
-          data-slot="button"
-        >
-          Close
-        </DialogPrimitive.CloseButton>
-      </Show>
-    </div>
+    />
   )
 }
 
@@ -175,13 +147,11 @@ const DialogDescription = <T extends ValidComponent = "p">(
 
 export {
   Dialog,
+  DialogTrigger,
   DialogClose,
   DialogContent,
-  DialogDescription,
-  DialogFooter,
   DialogHeader,
-  DialogOverlay,
-  DialogPortal,
+  DialogFooter,
   DialogTitle,
-  DialogTrigger
+  DialogDescription
 }