diff --git a/packages/react/src/docs/components/Dialog.mdx b/packages/react/src/docs/components/Dialog.mdx
index 52d83d8..8e7f3e9 100644
--- a/packages/react/src/docs/components/Dialog.mdx
+++ b/packages/react/src/docs/components/Dialog.mdx
@@ -1,7 +1,7 @@
 import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
 import { Button } from "@components/Button";
 import { Story } from "@/components/Story";
-import { LoadedCode } from "@/components/LoadedCode";
+import { LoadedCode, GITHUB } from "@/components/LoadedCode";
 import { 
     DialogClose,
     DialogContent,
@@ -19,7 +19,8 @@ import {
 import {
     useToast,
 } from "@components/Toast";
-
+import { DialogDemo } from "./DialogBlocks/Preview";
+import Examples from "./DialogBlocks/Examples";
 
 # Dialog
 A modal window that prompts the user to take an action or provides critical information.
@@ -31,74 +32,11 @@ A modal window that prompts the user to take an action or provides critical info
     </TabList>
     <TabContent name="preview">
         <Story layout="centered">
-            <DialogRoot>
-                <DialogTrigger>
-                    <Button preset="default">Open Dialog</Button>
-                </DialogTrigger>
-                <DialogOverlay>
-                    <DialogContent size={"fullMd"}>
-                        <DialogHeader>
-                            <DialogTitle>Dialog Title</DialogTitle>
-                            <DialogSubtitle>Dialog Subtitle</DialogSubtitle>
-                        </DialogHeader>
-                        Laborum non adipisicing enim enim culpa esse anim esse consequat Lorem incididunt.
-                        Enim mollit laborum sunt cillum voluptate est officia nostrud non consequat adipisicing 
-                        cupidatat aliquip magna. Voluptate nisi cupidatat qui nisi in pariatur. Sint consequat 
-                        labore pariatur mollit sint nostrud tempor commodo pariatur ea laboris.
-                        <DialogFooter>
-                            <DialogClose>
-                                <Button preset="default">Close</Button>
-                            </DialogClose>
-                        </DialogFooter>
-                    </DialogContent>
-                </DialogOverlay>
-            </DialogRoot>
+            <DialogDemo />
         </Story>
     </TabContent>
     <TabContent name="code">
-        ```tsx
-        import {
-            DialogRoot,
-            DialogTrigger,
-            DialogOverlay,
-            DialogContent,
-            DialogHeader,
-            DialogTitle,
-            DialogSubtitle,
-            DialogFooter,
-            DialogClose,
-        } from "@components/Dialog";
-        import { Button } from "@components/Button";
-
-        export function DialogDemo() {
-            return (
-                <DialogRoot>
-                    <DialogTrigger>
-                        <Button preset="default">Open Dialog</Button>
-                    </DialogTrigger>
-                    <DialogOverlay>
-                        <DialogContent size={"fullMd"}>
-                            <DialogHeader>
-                                <DialogTitle>Dialog Title</DialogTitle>
-                                <DialogSubtitle>Dialog Subtitle</DialogSubtitle>
-                            </DialogHeader>
-                            <p>
-                                Laborum non adipisicing enim enim culpa esse anim esse consequat Lorem incididunt.
-                                Enim mollit laborum sunt cillum voluptate est officia nostrud non consequat adipisicing 
-                                cupidatat aliquip magna. Voluptate nisi cupidatat qui nisi in pariatur. Sint consequat 
-                                labore pariatur mollit sint nostrud tempor commodo pariatur ea laboris.
-                            </p>
-                            <DialogFooter>
-                                <DialogClose>
-                                    <Button preset="default">Close</Button>
-                                </DialogClose>
-                            </DialogFooter>
-                        </DialogContent>
-                    </DialogOverlay>
-                </DialogRoot>
-            )
-        }
-        ```
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DialogBlocks/Preview.tsx`} />
     </TabContent>
 </TabProvider>
 
@@ -107,7 +45,7 @@ A modal window that prompts the user to take an action or provides critical info
 1. Create a new file `Dialog.tsx` in your component folder.
 2. Copy and paste the following code into the file.
 
-<LoadedCode from="https://raw.githubusercontent.com/p-sw/ui/main/packages/react/components/Dialog.tsx" />
+<LoadedCode from={`${GITHUB}/packages/react/src/components/Dialog.tsx`} />
 
 ## Usage
 
@@ -230,67 +168,11 @@ import {
     </TabList>
     <TabContent name="preview">
         <Story layout="centered">
-            <DialogRoot>
-                <DialogTrigger>
-                    <Button preset="default">What is this?</Button>
-                </DialogTrigger>
-                <DialogOverlay>
-                    <DialogContent size={"fullMd"}>
-                        <DialogHeader>
-                            <DialogTitle>Dialog Title</DialogTitle>
-                            <DialogSubtitle>Dialog Subtitle</DialogSubtitle>
-                        </DialogHeader>
-                        This is a dialog. You can put the information you want to show.
-                        <DialogFooter>
-                            <DialogClose>
-                                <Button preset="default">Ok!</Button>
-                            </DialogClose>
-                        </DialogFooter>
-                    </DialogContent>
-                </DialogOverlay>
-            </DialogRoot>
+            <Examples.BasicInformationalDialog />
         </Story>
     </TabContent>
     <TabContent name="code">
-        ```tsx
-        import {
-            DialogRoot,
-            DialogTrigger,
-            DialogOverlay,
-            DialogContent,
-            DialogHeader,
-            DialogTitle,
-            DialogSubtitle,
-            DialogFooter,
-            DialogClose,
-        } from "@components/Dialog";
-
-        export function DialogDemo() {
-            return (
-                <DialogRoot>
-                    <DialogTrigger>
-                        <Button preset="default">What is this?</Button>
-                    </DialogTrigger>
-                    <DialogOverlay>
-                        <DialogContent size={"fullMd"}>
-                            <DialogHeader>
-                                <DialogTitle>Dialog Title</DialogTitle>
-                                <DialogSubtitle>Dialog Subtitle</DialogSubtitle>
-                            </DialogHeader>
-                            <p>
-                                This is a dialog. You can put the information you want to show.
-                            </p>
-                            <DialogFooter>
-                                <DialogClose>
-                                    <Button preset="default">Ok!</Button>
-                                </DialogClose>
-                            </DialogFooter>
-                        </DialogContent>
-                    </DialogOverlay>
-                </DialogRoot>
-            );
-        }
-        ```
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DialogBlocks/Examples/BasicInformationalDialog.tsx`} />
     </TabContent>
 </TabProvider>
 
@@ -303,152 +185,11 @@ import {
     </TabList>
     <TabContent name="preview">
         <Story layout="centered">
-            <DialogRoot>
-                <DialogTrigger>
-                    <Button preset="danger">Delete Item</Button>
-                </DialogTrigger>
-                <DialogOverlay>
-                    <DialogContent size={"fullMd"}>
-                        <DialogHeader>
-                            <DialogTitle>Delete Item</DialogTitle>
-                            <DialogSubtitle>Are you sure you want to delete this item?</DialogSubtitle>
-                        </DialogHeader>
-                            <div className="flex flex-col gap-3">
-                            <ul className="list-disc list-inside">
-                                <li>This action will delete the item, and related data</li>
-                                <li>This action cannot be undone</li>
-                            </ul>
-                        </div>
-                        <DialogFooter>
-                            {(() => {
-                                const {toast} = useToast();
-                                return (
-                                    <>
-                                        <DialogClose>
-                                            <Button
-                                                preset="danger"
-                                                onClick={async () => {
-                                                    const toasted = toast({
-                                                        title: "Deleting Item",
-                                                        description: "Item deletion is requested",
-                                                        status: "loading",
-                                                    })
-
-                                                    await new Promise((r) => setTimeout(r, 1000));
-
-                                                    toasted.update({
-                                                        title: "Item Deleted",
-                                                        description: "The item has been deleted",
-                                                        status: "success",
-                                                    })
-                                                }}
-                                            >
-                                                Delete
-                                            </Button>
-                                        </DialogClose>
-                                        <DialogClose>
-                                            <Button
-                                                preset="default"
-                                                onClick={() => {
-                                                    toast({
-                                                        title: "Action Canceled",
-                                                        description: "The delete action has been canceled",
-                                                        status: "error",
-                                                    })                                                    
-                                                }}
-                                            >
-                                                Cancel
-                                            </Button>
-                                        </DialogClose>
-                                    </>
-                                )
-                            })()}
-                        </DialogFooter>
-                    </DialogContent>
-                </DialogOverlay>
-            </DialogRoot>
+            <Examples.DeletingItem />
         </Story>
     </TabContent>
     <TabContent name="code">
-        ```tsx
-        import {
-            DialogRoot,
-            DialogTrigger,
-            DialogOverlay,
-            DialogContent,
-            DialogHeader,
-            DialogTitle,
-            DialogSubtitle,
-            DialogFooter,
-            DialogClose,
-        } from "@components/Dialog";
-        import { Button } from "@components/Button";
-        import { useToast } from "@components/Toast";
-
-        function DialogDemo() {
-            const { toast } = useToast();
-
-            return (
-                <DialogRoot>
-                    <DialogTrigger>
-                        <Button preset="danger">Delete Item</Button>
-                    </DialogTrigger>
-                    <DialogOverlay>
-                        <DialogContent size={"fullMd"}>
-                            <DialogHeader>
-                                <DialogTitle>Delete Item</DialogTitle>
-                                <DialogSubtitle>Are you sure you want to delete this item?</DialogSubtitle>
-                            </DialogHeader>
-                                <div className="flex flex-col gap-3">
-                                <ul className="list-disc list-inside">
-                                    <li>This action will delete the item, and related data</li>
-                                    <li>This action cannot be undone</li>
-                                </ul>
-                            </div>
-                            <DialogFooter>
-                                <DialogClose>
-                                    <Button
-                                        preset="danger"
-                                        onClick={async () => {
-                                            const toasted = toast({
-                                                title: "Deleting Item",
-                                                description: "Item deletion is requested",
-                                                status: "loading",
-                                            })
-
-                                            await new Promise((r) => setTimeout(r, 1000));
-
-                                            toasted.update({
-                                                title: "Item Deleted",
-                                                description: "The item has been deleted",
-                                                status: "success",
-                                            })
-                                        }}
-                                    >
-                                        Delete
-                                    </Button>
-                                </DialogClose>
-                                <DialogClose>
-                                    <Button
-                                        preset="default"
-                                        onClick={() => {
-                                            toast({
-                                                title: "Action Canceled",
-                                                description: "The delete action has been canceled",
-                                                status: "error",
-                                            })                                                    
-                                        }}
-                                    >
-                                        Cancel
-                                    </Button>
-                                </DialogClose>
-                            </DialogFooter>
-                        </DialogContent>
-                    </DialogOverlay>
-                </DialogRoot>
-            )
-        }
-        ```
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DialogBlocks/Examples/DeletingItem.tsx`} />
     </TabContent>
 </TabProvider>
 
diff --git a/packages/react/src/docs/components/DialogBlocks/Examples/BasicInformationalDialog.tsx b/packages/react/src/docs/components/DialogBlocks/Examples/BasicInformationalDialog.tsx
new file mode 100644
index 0000000..5051e08
--- /dev/null
+++ b/packages/react/src/docs/components/DialogBlocks/Examples/BasicInformationalDialog.tsx
@@ -0,0 +1,36 @@
+import { Button } from "@components/Button";
+import {
+  DialogRoot,
+  DialogTrigger,
+  DialogOverlay,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogSubtitle,
+  DialogFooter,
+  DialogClose,
+} from "@components/Dialog";
+
+export function BasicInformationalDialog() {
+  return (
+    <DialogRoot>
+      <DialogTrigger>
+        <Button preset="default">What is this?</Button>
+      </DialogTrigger>
+      <DialogOverlay>
+        <DialogContent size={"fullMd"}>
+          <DialogHeader>
+            <DialogTitle>Dialog Title</DialogTitle>
+            <DialogSubtitle>Dialog Subtitle</DialogSubtitle>
+          </DialogHeader>
+          <p>This is a dialog. You can put the information you want to show.</p>
+          <DialogFooter>
+            <DialogClose>
+              <Button preset="default">Ok!</Button>
+            </DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </DialogOverlay>
+    </DialogRoot>
+  );
+}
diff --git a/packages/react/src/docs/components/DialogBlocks/Examples/DeletingItem.tsx b/packages/react/src/docs/components/DialogBlocks/Examples/DeletingItem.tsx
new file mode 100644
index 0000000..1c58385
--- /dev/null
+++ b/packages/react/src/docs/components/DialogBlocks/Examples/DeletingItem.tsx
@@ -0,0 +1,79 @@
+import {
+  DialogRoot,
+  DialogTrigger,
+  DialogOverlay,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogSubtitle,
+  DialogFooter,
+  DialogClose,
+} from "@components/Dialog";
+import { Button } from "@components/Button";
+import { useToast } from "@components/Toast";
+
+export function DeletingItem() {
+  const { toast } = useToast();
+
+  return (
+    <DialogRoot>
+      <DialogTrigger>
+        <Button preset="danger">Delete Item</Button>
+      </DialogTrigger>
+      <DialogOverlay>
+        <DialogContent size={"fullMd"}>
+          <DialogHeader>
+            <DialogTitle>Delete Item</DialogTitle>
+            <DialogSubtitle>
+              Are you sure you want to delete this item?
+            </DialogSubtitle>
+          </DialogHeader>
+          <div className="flex flex-col gap-3">
+            <ul className="list-disc list-inside">
+              <li>This action will delete the item, and related data</li>
+              <li>This action cannot be undone</li>
+            </ul>
+          </div>
+          <DialogFooter>
+            <DialogClose>
+              <Button
+                preset="danger"
+                onClick={async () => {
+                  const toasted = toast({
+                    title: "Deleting Item",
+                    description: "Item deletion is requested",
+                    status: "loading",
+                  });
+
+                  await new Promise((r) => setTimeout(r, 1000));
+
+                  toasted.update({
+                    title: "Item Deleted",
+                    description: "The item has been deleted",
+                    status: "success",
+                  });
+                }}
+              >
+                Delete
+              </Button>
+            </DialogClose>
+            <DialogClose>
+              <Button
+                preset="default"
+                onClick={() => {
+                  toast({
+                    title: "Action Canceled",
+                    description: "The delete action has been canceled",
+                    status: "error",
+                  });
+                }}
+              >
+                Cancel
+              </Button>
+            </DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </DialogOverlay>
+    </DialogRoot>
+  );
+}
diff --git a/packages/react/src/docs/components/DialogBlocks/Examples/index.ts b/packages/react/src/docs/components/DialogBlocks/Examples/index.ts
new file mode 100644
index 0000000..1422de3
--- /dev/null
+++ b/packages/react/src/docs/components/DialogBlocks/Examples/index.ts
@@ -0,0 +1,8 @@
+import { BasicInformationalDialog } from "./BasicInformationalDialog";
+import { DeletingItem } from "./DeletingItem";
+
+export default {
+    BasicInformationalDialog,
+    DeletingItem,
+}
+
diff --git a/packages/react/src/docs/components/DialogBlocks/Preview.tsx b/packages/react/src/docs/components/DialogBlocks/Preview.tsx
new file mode 100644
index 0000000..3392a50
--- /dev/null
+++ b/packages/react/src/docs/components/DialogBlocks/Preview.tsx
@@ -0,0 +1,42 @@
+import {
+  DialogRoot,
+  DialogTrigger,
+  DialogOverlay,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogSubtitle,
+  DialogFooter,
+  DialogClose,
+} from "@components/Dialog";
+import { Button } from "@components/Button";
+
+export function DialogDemo() {
+  return (
+    <DialogRoot>
+      <DialogTrigger>
+        <Button preset="default">Open Dialog</Button>
+      </DialogTrigger>
+      <DialogOverlay>
+        <DialogContent size={"fullMd"}>
+          <DialogHeader>
+            <DialogTitle>Dialog Title</DialogTitle>
+            <DialogSubtitle>Dialog Subtitle</DialogSubtitle>
+          </DialogHeader>
+          <p>
+            Laborum non adipisicing enim enim culpa esse anim esse consequat
+            Lorem incididunt. Enim mollit laborum sunt cillum voluptate est
+            officia nostrud non consequat adipisicing cupidatat aliquip magna.
+            Voluptate nisi cupidatat qui nisi in pariatur. Sint consequat labore
+            pariatur mollit sint nostrud tempor commodo pariatur ea laboris.
+          </p>
+          <DialogFooter>
+            <DialogClose>
+              <Button preset="default">Close</Button>
+            </DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </DialogOverlay>
+    </DialogRoot>
+  );
+}