diff --git a/apps/docs/src/config/docs.ts b/apps/docs/src/config/docs.ts
index 08875e7..c32eec7 100644
--- a/apps/docs/src/config/docs.ts
+++ b/apps/docs/src/config/docs.ts
@@ -88,6 +88,10 @@ export const docsConfig: Config = {
           title: "Collapsible",
           href: "/docs/components/collapsible"
         },
+        {
+          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 e61f8f7..3792c03 100644
--- a/apps/docs/src/registry/__index__.tsx
+++ b/apps/docs/src/registry/__index__.tsx
@@ -226,6 +226,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: "",
@@ -1070,6 +1084,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 afaca63..e9101b6 100644
--- a/apps/docs/src/registry/examples/_registry.ts
+++ b/apps/docs/src/registry/examples/_registry.ts
@@ -68,23 +68,23 @@ export const examples: Registry["items"] = [
     ]
   },
   {
-    name: "breadcrumb-demo",
+    name: "breadcrumb-collapsed",
     type: "registry:example",
     registryDependencies: ["breadcrumb"],
     files: [
       {
-        path: "examples/breadcrumb-demo.tsx",
+        path: "examples/breadcrumb-collapsed.tsx",
         type: "registry:example"
       }
     ]
   },
   {
-    name: "breadcrumb-collapsed",
+    name: "breadcrumb-demo",
     type: "registry:example",
     registryDependencies: ["breadcrumb"],
     files: [
       {
-        path: "examples/breadcrumb-collapsed.tsx",
+        path: "examples/breadcrumb-demo.tsx",
         type: "registry:example"
       }
     ]
@@ -122,73 +122,6 @@ export const examples: Registry["items"] = [
       }
     ]
   },
-  {
-    name: "carousel-demo",
-    type: "registry:example",
-    registryDependencies: ["carousel", "card"],
-    files: [
-      {
-        path: "examples/carousel-demo.tsx",
-        type: "registry:example"
-      }
-    ]
-  },
-  {
-    name: "carousel-size",
-    type: "registry:example",
-    registryDependencies: ["carousel", "card"],
-    files: [
-      {
-        path: "examples/carousel-size.tsx",
-        type: "registry:example"
-      }
-    ]
-  },
-  {
-    name: "carousel-spacing",
-    type: "registry:example",
-    registryDependencies: ["carousel", "card"],
-    files: [
-      {
-        path: "examples/carousel-spacing.tsx",
-        type: "registry:example"
-      }
-    ]
-  },
-  {
-    name: "carousel-orientation",
-    type: "registry:example",
-    registryDependencies: ["carousel", "card"],
-    files: [
-      {
-        path: "examples/carousel-orientation.tsx",
-        type: "registry:example"
-      }
-    ]
-  },
-  {
-    name: "carousel-api",
-    type: "registry:example",
-    registryDependencies: ["carousel", "card"],
-    files: [
-      {
-        path: "examples/carousel-api.tsx",
-        type: "registry:example"
-      }
-    ]
-  },
-  {
-    name: "carousel-plugin",
-    type: "registry:example",
-    dependencies: ["embla-carousel-autoplay"],
-    registryDependencies: ["carousel", "card"],
-    files: [
-      {
-        path: "examples/carousel-plugin.tsx",
-        type: "registry:example"
-      }
-    ]
-  },
   {
     name: "button-default",
     type: "registry:example",
@@ -256,23 +189,23 @@ export const examples: Registry["items"] = [
     ]
   },
   {
-    name: "button-group-input-group",
+    name: "button-group-input",
     type: "registry:example",
-    registryDependencies: ["button", "button-group", "input-group"],
+    registryDependencies: ["button", "button-group", "input"],
     files: [
       {
-        path: "examples/button-group-input-group.tsx",
+        path: "examples/button-group-input.tsx",
         type: "registry:example"
       }
     ]
   },
   {
-    name: "button-group-input",
+    name: "button-group-input-group",
     type: "registry:example",
-    registryDependencies: ["button", "button-group", "input"],
+    registryDependencies: ["button", "button-group", "input-group"],
     files: [
       {
-        path: "examples/button-group-input.tsx",
+        path: "examples/button-group-input-group.tsx",
         type: "registry:example"
       }
     ]
@@ -443,12 +376,68 @@ export const examples: Registry["items"] = [
     ]
   },
   {
-    name: "dropdown-menu-checkboxes",
+    name: "carousel-api",
     type: "registry:example",
-    registryDependencies: ["dropdown-menu"],
+    registryDependencies: ["carousel", "card"],
     files: [
       {
-        path: "examples/dropdown-menu-checkboxes.tsx",
+        path: "examples/carousel-api.tsx",
+        type: "registry:example"
+      }
+    ]
+  },
+  {
+    name: "carousel-demo",
+    type: "registry:example",
+    registryDependencies: ["carousel", "card"],
+    files: [
+      {
+        path: "examples/carousel-demo.tsx",
+        type: "registry:example"
+      }
+    ]
+  },
+  {
+    name: "carousel-orientation",
+    type: "registry:example",
+    registryDependencies: ["carousel", "card"],
+    files: [
+      {
+        path: "examples/carousel-orientation.tsx",
+        type: "registry:example"
+      }
+    ]
+  },
+  {
+    name: "carousel-plugin",
+    type: "registry:example",
+    dependencies: ["embla-carousel-autoplay"],
+    registryDependencies: ["carousel", "card"],
+    files: [
+      {
+        path: "examples/carousel-plugin.tsx",
+        type: "registry:example"
+      }
+    ]
+  },
+  {
+    name: "carousel-size",
+    type: "registry:example",
+    registryDependencies: ["carousel", "card"],
+    files: [
+      {
+        path: "examples/carousel-size.tsx",
+        type: "registry:example"
+      }
+    ]
+  },
+  {
+    name: "carousel-spacing",
+    type: "registry:example",
+    registryDependencies: ["carousel", "card"],
+    files: [
+      {
+        path: "examples/carousel-spacing.tsx",
         type: "registry:example"
       }
     ]
@@ -475,6 +464,39 @@ export const examples: Registry["items"] = [
       }
     ]
   },
+  {
+    name: "dialog-close-button",
+    type: "registry:example",
+    registryDependencies: ["dialog", "button"],
+    files: [
+      {
+        path: "examples/dialog-close-button.tsx",
+        type: "registry:example"
+      }
+    ]
+  },
+  {
+    name: "dialog-demo",
+    type: "registry:example",
+    registryDependencies: ["dialog", "button", "field", "input"],
+    files: [
+      {
+        path: "examples/dialog-demo.tsx",
+        type: "registry:example"
+      }
+    ]
+  },
+  {
+    name: "dropdown-menu-checkboxes",
+    type: "registry:example",
+    registryDependencies: ["dropdown-menu"],
+    files: [
+      {
+        path: "examples/dropdown-menu-checkboxes.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 0000000..8a62a33
--- /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 0000000..7cac026
--- /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 e72bac0..396baf2 100644
--- a/apps/docs/src/registry/styles/style-lyra.css
+++ b/apps/docs/src/registry/styles/style-lyra.css
@@ -422,11 +422,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 1956385..73f4aca 100644
--- a/apps/docs/src/registry/styles/style-maia.css
+++ b/apps/docs/src/registry/styles/style-maia.css
@@ -443,11 +443,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 45cb75d..71c5a48 100644
--- a/apps/docs/src/registry/styles/style-mira.css
+++ b/apps/docs/src/registry/styles/style-mira.css
@@ -443,11 +443,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 e736cea..4e17552 100644
--- a/apps/docs/src/registry/styles/style-nova.css
+++ b/apps/docs/src/registry/styles/style-nova.css
@@ -443,11 +443,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 7fd5d0b..9892f64 100644
--- a/apps/docs/src/registry/styles/style-vega.css
+++ b/apps/docs/src/registry/styles/style-vega.css
@@ -439,11 +439,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 60c5a50..f8ee21f 100644
--- a/apps/docs/src/registry/ui/_registry.ts
+++ b/apps/docs/src/registry/ui/_registry.ts
@@ -145,6 +145,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 f305f49..1cb40e7 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} />
@@ -31,10 +33,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 +61,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 -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"
@@ -71,22 +70,13 @@ 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"
+            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 6l-12 12" />
-              <path d="M6 6l12 12" />
-            </svg>
+            <X />
             <span class="sr-only">Close</span>
           </DialogPrimitive.CloseButton>
         </Show>
@@ -99,7 +89,7 @@ const DialogHeader: Component<ComponentProps<"div">> = (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}
     />
@@ -110,7 +100,10 @@ const DialogFooter: Component<ComponentProps<"div">> = (props) => {
   const [local, others] = splitProps(props, ["class"])
   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}
     />
@@ -127,7 +120,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 +138,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}
     />
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 0000000..66f0575
--- /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>
+```