diff --git a/src/docs/components/Button.mdx b/src/docs/components/Button.mdx
index c6d10d6..c214fd3 100644
--- a/src/docs/components/Button.mdx
+++ b/src/docs/components/Button.mdx
@@ -1,6 +1,6 @@
 import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
 import { Story } from "@/components/Story";
-import { LoadedCode, GITHUB } from "@/components/LoadedCode";
+import { LoadedCode, GITHUB_COMP, GITHUB_COMP_PREVIEW, GITHUB_STORY } from "@/components/LoadedCode";
 import { ButtonDemo } from "./ButtonBlocks/Preview";
 import Examples from "./ButtonBlocks/Examples";
 
@@ -18,7 +18,7 @@ Displays a button or a component that looks like a button.
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Preview.tsx`} />
+        <LoadedCode from={GITHUB_COMP_PREVIEW("Button")} />
     </TabContent>
 </TabProvider>
 
@@ -27,7 +27,7 @@ Displays a button or a component that looks like a button.
 1. Create a new file `Button.tsx` in your component folder.
 2. Copy and paste the following code into the file.
 
-<LoadedCode from={`${GITHUB}/packages/react/components/Button.tsx`} />
+<LoadedCode from={GITHUB_COMP("Button")} />
 
 ## Usage
 
@@ -72,7 +72,7 @@ import { Button } from "@components/Button";
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Default.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Button", "Default")} />
     </TabContent>
 </TabProvider>
 
@@ -89,7 +89,7 @@ import { Button } from "@components/Button";
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Ghost.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Button", "Ghost")} />
     </TabContent>
 </TabProvider>
 
@@ -106,7 +106,7 @@ import { Button } from "@components/Button";
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Link.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Button", "Link")} />
     </TabContent>
 </TabProvider>
 
@@ -123,7 +123,7 @@ import { Button } from "@components/Button";
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Success.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Button", "Success")} />
     </TabContent>
 </TabProvider>
 
@@ -140,7 +140,7 @@ import { Button } from "@components/Button";
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Warning.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Button", "Warning")} />
     </TabContent>
 </TabProvider>
 
@@ -157,6 +157,6 @@ import { Button } from "@components/Button";
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Danger.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Button", "Danger")} />
     </TabContent>
 </TabProvider>
diff --git a/src/docs/components/Checkbox.mdx b/src/docs/components/Checkbox.mdx
index af2677e..a257c60 100644
--- a/src/docs/components/Checkbox.mdx
+++ b/src/docs/components/Checkbox.mdx
@@ -1,6 +1,6 @@
 import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
 import { Story } from "@/components/Story";
-import { LoadedCode, GITHUB } from "@/components/LoadedCode";
+import { LoadedCode, GITHUB_COMP, GITHUB_COMP_PREVIEW, GITHUB_STORY } from "@/components/LoadedCode";
 import { CheckboxDemo } from "./CheckboxBlocks/Preview";
 import Examples from "./CheckboxBlocks/Examples";
 
@@ -18,7 +18,7 @@ A control that allows the user to toggle between checked and not checked.
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/CheckboxBlocks/Preview.tsx`} />
+        <LoadedCode from={GITHUB_COMP_PREVIEW("Checkbox")} />
     </TabContent>
 </TabProvider>
 
@@ -27,7 +27,7 @@ A control that allows the user to toggle between checked and not checked.
 1. Create a new file `Checkbox.mdx` in your component folder.
 2. Copy and paste the following code into the file.
 
-<LoadedCode from={`${GITHUB}/packages/react/components/Checkbox.tsx`} />
+<LoadedCode from={GITHUB_COMP("Checkbox")} />
 
 ## Usage
 
@@ -62,7 +62,7 @@ import { Checkbox } from "@components/Checkbox";
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/CheckboxBlocks/Examples/Text.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Checkbox", "Text")} />
     </TabContent>
 </TabProvider>
 
@@ -79,6 +79,6 @@ import { Checkbox } from "@components/Checkbox";
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/CheckboxBlocks/Examples/Disabled.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Checkbox", "Disabled")} />
     </TabContent>
 </TabProvider>
diff --git a/src/docs/components/Dialog.mdx b/src/docs/components/Dialog.mdx
index f94fc77..f993896 100644
--- a/src/docs/components/Dialog.mdx
+++ b/src/docs/components/Dialog.mdx
@@ -1,6 +1,6 @@
 import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
 import { Story } from "@/components/Story";
-import { LoadedCode, GITHUB } from "@/components/LoadedCode";
+import { LoadedCode, GITHUB_COMP, GITHUB_COMP_PREVIEW, GITHUB_STORY } from "@/components/LoadedCode";
 import { DialogDemo } from "./DialogBlocks/Preview";
 import Examples from "./DialogBlocks/Examples";
 
@@ -18,7 +18,7 @@ A modal window that prompts the user to take an action or provides critical info
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DialogBlocks/Preview.tsx`} />
+        <LoadedCode from={GITHUB_COMP_PREVIEW("Dialog")} />
     </TabContent>
 </TabProvider>
 
@@ -27,7 +27,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={`${GITHUB}/packages/react/components/Dialog.tsx`} />
+<LoadedCode from={GITHUB_COMP("Dialog")} />
 
 ## Usage
 
@@ -154,7 +154,7 @@ import {
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DialogBlocks/Examples/BasicInformationalDialog.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Dialog", "BasicInformationalDialog")} />
     </TabContent>
 </TabProvider>
 
@@ -171,7 +171,7 @@ import {
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DialogBlocks/Examples/DeletingItem.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Dialog", "DeletingItem")} />
     </TabContent>
 </TabProvider>
 
diff --git a/src/docs/components/Drawer.mdx b/src/docs/components/Drawer.mdx
index 4005796..fde379f 100644
--- a/src/docs/components/Drawer.mdx
+++ b/src/docs/components/Drawer.mdx
@@ -1,6 +1,6 @@
 import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
 import { Story } from "@/components/Story";
-import { LoadedCode, GITHUB } from '@/components/LoadedCode';
+import { LoadedCode, GITHUB_COMP, GITHUB_COMP_PREVIEW, GITHUB_STORY } from '@/components/LoadedCode';
 import { DrawerDemo } from "./DrawerBlocks/Preview";
 import Examples from "./DrawerBlocks/Examples";
 
@@ -18,7 +18,7 @@ Displays a panel that slides out from the edge of the screen, typically used for
     </Story>
   </TabContent>
   <TabContent name="code">
-    <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DrawerBlocks/Preview.tsx`} />
+    <LoadedCode from={GITHUB_COMP_PREVIEW("Drawer")} />
   </TabContent>
 </TabProvider>
 
@@ -27,7 +27,7 @@ Displays a panel that slides out from the edge of the screen, typically used for
 1. Create a new file `Drawer.tsx` in your component folder.
 2. Copy and paste the following code into the file.
 
-<LoadedCode from={`${GITHUB}/packages/react/components/Drawer.tsx`} />
+<LoadedCode from={GITHUB_COMP("Drawer")} />
 
 ## Usage
 
@@ -147,7 +147,7 @@ import {
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DrawerBlocks/Examples/Left.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Drawer", "Left")} />
     </TabContent>
 </TabProvider>
 
@@ -164,7 +164,7 @@ import {
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DrawerBlocks/Examples/Right.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Drawer", "Right")} />
     </TabContent>
 </TabProvider>
 
@@ -181,7 +181,7 @@ import {
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DrawerBlocks/Examples/Top.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Drawer", "Top")} />
     </TabContent>
 </TabProvider>
 
@@ -198,6 +198,6 @@ import {
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DrawerBlocks/Examples/Bottom.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Drawer", "Bottom")} />
     </TabContent>
 </TabProvider>
diff --git a/src/docs/components/Input.mdx b/src/docs/components/Input.mdx
index 7ca89fe..a1f083a 100644
--- a/src/docs/components/Input.mdx
+++ b/src/docs/components/Input.mdx
@@ -1,6 +1,6 @@
 import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
 import { Story } from "@/components/Story";
-import { LoadedCode, GITHUB } from "@/components/LoadedCode";
+import { LoadedCode, GITHUB_COMP, GITHUB_COMP_PREVIEW, GITHUB_STORY } from "@/components/LoadedCode";
 import { InputDemo } from "./InputBlocks/Preview";
 import { InputFrameDemo } from "./InputFrameBlocks/Preview";
 import InputExamples from "./InputBlocks/Examples";
@@ -19,7 +19,7 @@ Element that captures user's input.
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/InputBlocks/Preview.tsx`} />
+        <LoadedCode from={GITHUB_COMP_PREVIEW("Input")} />
     </TabContent>
 </TabProvider>
 
@@ -28,7 +28,7 @@ Element that captures user's input.
 1. Create a new file `Input.tsx` in your component folder.
 2. Copy and paste the following code into the file.
 
-<LoadedCode from={`${GITHUB}/packages/react/components/Input.tsx`} />
+<LoadedCode from={GITHUB_COMP("Input")} />
 
 ## Usage
 
@@ -64,7 +64,7 @@ import { Input } from "@components/Input";
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/InputBlocks/Examples/Invalid.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Input", "Invalid")} />
     </TabContent>
 </TabProvider>
 
@@ -81,7 +81,7 @@ import { Input } from "@components/Input";
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/InputBlocks/Examples/Disabled.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Input", "Disabled")} />
     </TabContent>
 </TabProvider>
 
@@ -99,7 +99,7 @@ Label with input's style.
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/InputFrameBlocks/Preview.tsx`} />
+        <LoadedCode from={GITHUB_COMP_PREVIEW("InputFrame")} />
     </TabContent>
 </TabProvider>
 
diff --git a/src/docs/components/Label.mdx b/src/docs/components/Label.mdx
index 10170aa..f9c9044 100644
--- a/src/docs/components/Label.mdx
+++ b/src/docs/components/Label.mdx
@@ -2,7 +2,7 @@ import {
     TabProvider, TabTrigger, TabContent, TabList
 } from "@pswui/Tabs";
 import { Story } from "@/components/Story";
-import { LoadedCode, GITHUB } from "@/components/LoadedCode";
+import { LoadedCode, GITHUB_STORY, GITHUB_COMP, GITHUB_COMP_PREVIEW } from "@/components/LoadedCode";
 import { LabelDemo } from "./LabelBlocks/Preview";
 import Examples from "./LabelBlocks/Examples"
 
@@ -20,7 +20,7 @@ A wrapper that used to tag and describe form elements clearly and accessibly.
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/LabelBlocks/Preview.tsx`} />
+        <LoadedCode from={GITHUB_COMP_PREVIEW("Label")} />
     </TabContent>
 </TabProvider>
 
@@ -29,7 +29,7 @@ A wrapper that used to tag and describe form elements clearly and accessibly.
 1. Create a new file `Label.tsx` in your component folder.
 2. Copy and paste the following code into the file.
 
-<LoadedCode from={`${GITHUB}/packages/react/components/Label.tsx`} />
+<LoadedCode from={GITHUB_COMP("Label")} />
 
 ## Usage
 
@@ -69,7 +69,7 @@ import { Label } from "@components/Label"
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/LabelBlocks/Examples/Vertical.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Label", "Vertical")} />
     </TabContent>
 </TabProvider>
 
@@ -86,7 +86,7 @@ import { Label } from "@components/Label"
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/LabelBlocks/Examples/Horizontal.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Label", "Horizontal")} />
     </TabContent>
 </TabProvider>
 
@@ -103,7 +103,7 @@ import { Label } from "@components/Label"
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/LabelBlocks/Examples/Invalid.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Label", "Invalid")} />
     </TabContent>
 </TabProvider>
 
@@ -120,6 +120,6 @@ import { Label } from "@components/Label"
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/LabelBlocks/Examples/Disabled.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Label", "Disabled")} />
     </TabContent>
 </TabProvider>
\ No newline at end of file
diff --git a/src/docs/components/Popover.mdx b/src/docs/components/Popover.mdx
index 2e41e0a..b853a03 100644
--- a/src/docs/components/Popover.mdx
+++ b/src/docs/components/Popover.mdx
@@ -1,6 +1,6 @@
 import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
 import { Story } from "@/components/Story";
-import { LoadedCode, GITHUB } from "@/components/LoadedCode";
+import { LoadedCode, GITHUB_STORY, GITHUB_COMP, GITHUB_COMP_PREVIEW } from "@/components/LoadedCode";
 import { PopoverDemo } from "./PopoverBlocks/Preview";
 import Examples from "./PopoverBlocks/Examples";
 
@@ -18,7 +18,7 @@ Displays rich content in a portal, triggered by a button.
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/PopoverBlocks/Preview.tsx`} />
+        <LoadedCode from={GITHUB_COMP_PREVIEW("Popover")} />
     </TabContent>
 </TabProvider>
 
@@ -27,7 +27,7 @@ Displays rich content in a portal, triggered by a button.
 1. Create a new file `Popover.tsx` in your component folder.
 2. Copy and paste the following code into the file.
 
-<LoadedCode from={`${GITHUB}/packages/react/components/Popover.tsx`} />
+<LoadedCode from={GITHUB_COMP("Popover")} />
 
 ## Usage
 
@@ -95,7 +95,7 @@ import { Popover, PopoverTrigger, PopoverContent } from "@components/popover"
     </Story>
   </TabContent>
   <TabContent name={"code"}>
-    <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/PopoverBlocks/Examples/ThemeSelector.tsx`} />
+    <LoadedCode from={GITHUB_STORY("Popover", "ThemeSelector")} />
   </TabContent>
 </TabProvider>
 
@@ -112,6 +112,6 @@ import { Popover, PopoverTrigger, PopoverContent } from "@components/popover"
     </Story>
   </TabContent>
   <TabContent name={"code"}>
-    <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/PopoverBlocks/Examples/UserControl.tsx`} />
+    <LoadedCode from={GITHUB_STORY("Popover", "UserControl")} />
   </TabContent>
 </TabProvider>
\ No newline at end of file
diff --git a/src/docs/components/Switch.mdx b/src/docs/components/Switch.mdx
index 8feb670..0463e3c 100644
--- a/src/docs/components/Switch.mdx
+++ b/src/docs/components/Switch.mdx
@@ -1,6 +1,6 @@
 import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
 import { Story } from "@/components/Story";
-import { LoadedCode, GITHUB } from "@/components/LoadedCode";
+import { LoadedCode, GITHUB_COMP, GITHUB_COMP_PREVIEW } from "@/components/LoadedCode";
 import { SwitchDemo } from "./SwitchBlocks/Preview";
 
 # Switch
@@ -17,7 +17,7 @@ Toggle between two states with a sleek design. Perfect for enabling/disabling op
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/SwitchBlocks/Preview.tsx`} />
+        <LoadedCode from={GITHUB_COMP_PREVIEW("Switch")} />
     </TabContent>
 </TabProvider>
 
@@ -26,7 +26,7 @@ Toggle between two states with a sleek design. Perfect for enabling/disabling op
 1. Create a new file `Switch.tsx` in your component folder.
 2. Copy and paste the following code into the file.
 
-<LoadedCode from={`${GITHUB}/packages/react/components/Switch.tsx`} />
+<LoadedCode from={GITHUB_COMP("Switch")} />
 
 ## Usage
 
diff --git a/src/docs/components/Tabs.mdx b/src/docs/components/Tabs.mdx
index db2eb7c..35e2000 100644
--- a/src/docs/components/Tabs.mdx
+++ b/src/docs/components/Tabs.mdx
@@ -1,6 +1,6 @@
 import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
 import { Story } from "@/components/Story";
-import { LoadedCode, GITHUB } from "@/components/LoadedCode";
+import { LoadedCode, GITHUB_COMP, GITHUB_COMP_PREVIEW } from "@/components/LoadedCode";
 import { TabsDemo } from "./TabsBlocks/Preview";
 
 # Tabs
@@ -17,7 +17,7 @@ Organizes content into multiple sections with tabbed navigation.
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TabsBlocks/Preview.tsx`} />
+        <LoadedCode from={GITHUB_COMP_PREVIEW("Tabs")} />
     </TabContent>
 </TabProvider>
 
@@ -26,7 +26,7 @@ Organizes content into multiple sections with tabbed navigation.
 1. Create a new file `Tabs.tsx` in your component folder.
 2. Copy and paste the following code into the file.
 
-<LoadedCode from={`${GITHUB}/packages/react/components/Tabs.tsx`} />
+<LoadedCode from={GITHUB_COMP("Tabs")} />
 
 ## Usage
 
diff --git a/src/docs/components/Toast.mdx b/src/docs/components/Toast.mdx
index 4cea956..ee83950 100644
--- a/src/docs/components/Toast.mdx
+++ b/src/docs/components/Toast.mdx
@@ -1,6 +1,6 @@
 import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs"
 import { Story } from "@/components/Story";
-import { LoadedCode, GITHUB } from "@/components/LoadedCode";
+import { LoadedCode, GITHUB_STORY, GITHUB_COMP, GITHUB_COMP_PREVIEW } from "@/components/LoadedCode";
 import { ToastDemo } from "./ToastBlocks/Preview";
 import Examples from "./ToastBlocks/Examples";
 
@@ -18,7 +18,7 @@ A brief message alert to inform users about events or actions.
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
+        <LoadedCode from={GITHUB_COMP_PREVIEW("Toast")} />
     </TabContent>
 </TabProvider>
 
@@ -27,7 +27,7 @@ A brief message alert to inform users about events or actions.
 1. Create a new file `Toast.tsx` in your component folder.
 2. Copy and paste the following code into the file.
 
-<LoadedCode from={`${GITHUB}/packages/react/components/Toast.tsx`} />
+<LoadedCode from={GITHUB_COMP("Toast")} />
 
 ## Usage
 
@@ -92,7 +92,7 @@ const defaultToastOption: ToastOption = {
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Toast", "Normal")} />
     </TabContent>
 </TabProvider>
 
@@ -109,7 +109,7 @@ const defaultToastOption: ToastOption = {
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Toast", "Success")} />
     </TabContent>
 </TabProvider>
 
@@ -126,7 +126,7 @@ const defaultToastOption: ToastOption = {
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Toast", "Error")} />
     </TabContent>
 </TabProvider>
 
@@ -143,7 +143,7 @@ const defaultToastOption: ToastOption = {
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Toast", "Warning")} />
     </TabContent>
 </TabProvider>
 
@@ -160,7 +160,7 @@ const defaultToastOption: ToastOption = {
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Toast", "PendingFail")} />
     </TabContent>
 </TabProvider>
 
@@ -177,6 +177,6 @@ const defaultToastOption: ToastOption = {
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Toast", "PendingSuccess")} />
     </TabContent>
 </TabProvider>
\ No newline at end of file
diff --git a/src/docs/components/Tooltip.mdx b/src/docs/components/Tooltip.mdx
index 12c5f1c..44ce1fb 100644
--- a/src/docs/components/Tooltip.mdx
+++ b/src/docs/components/Tooltip.mdx
@@ -1,6 +1,6 @@
 import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
 import { Story } from "@/components/Story";
-import { LoadedCode, GITHUB } from "@/components/LoadedCode";
+import { LoadedCode, GITHUB_STORY, GITHUB_COMP, GITHUB_COMP_PREVIEW } from "@/components/LoadedCode";
 import { TooltipDemo } from "./TooltipBlocks/Preview";
 import Examples from "./TooltipBlocks/Examples";
 
@@ -18,7 +18,7 @@ A brief helper for providing contextual information or guiding user interactions
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Preview.tsx`} />
+        <LoadedCode from={GITHUB_COMP_PREVIEW("Tooltip")} />
     </TabContent>
 </TabProvider>
 
@@ -27,7 +27,7 @@ A brief helper for providing contextual information or guiding user interactions
 1. Create a new file `Tooltip.tsx` in your component folder.
 2. Copy and paste the following code into the file.
 
-<LoadedCode from={`${GITHUB}/packages/react/components/Tooltip.tsx`} />
+<LoadedCode from={GITHUB_COMP("Tooltip")} />
 
 ## Usage
 
@@ -82,7 +82,7 @@ import { Tooltip, TooltipContent } from "@components/Tooltip";
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/Top.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Tooltip", "Top")} />
     </TabContent>
 </TabProvider>
 
@@ -99,7 +99,7 @@ import { Tooltip, TooltipContent } from "@components/Tooltip";
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/Bottom.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Tooltip", "Bottom")} />
     </TabContent>
 </TabProvider>
 
@@ -116,7 +116,7 @@ import { Tooltip, TooltipContent } from "@components/Tooltip";
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/Left.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Tooltip", "Left")} />
     </TabContent>
 </TabProvider>
 
@@ -133,7 +133,7 @@ import { Tooltip, TooltipContent } from "@components/Tooltip";
         </Story>
     </TabContent>
     <TabContent name="code">
-        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/Right.tsx`} />
+        <LoadedCode from={GITHUB_STORY("Tooltip", "Right")} />
     </TabContent>
 </TabProvider>
 
@@ -150,7 +150,7 @@ import { Tooltip, TooltipContent } from "@components/Tooltip";
     </Story>
   </TabContent>
   <TabContent name="code">
-    <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/NoDelay.tsx`} />
+    <LoadedCode from={GITHUB_STORY("Tooltip", "NoDelay")} />
   </TabContent>
 </TabProvider>
 
@@ -167,7 +167,7 @@ import { Tooltip, TooltipContent } from "@components/Tooltip";
     </Story>
   </TabContent>
   <TabContent name="code">
-    <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/EarlyDelay.tsx`} />
+    <LoadedCode from={GITHUB_STORY("Tooltip", "EarlyDelay")} />
   </TabContent>
 </TabProvider>
 
@@ -184,7 +184,7 @@ import { Tooltip, TooltipContent } from "@components/Tooltip";
     </Story>
   </TabContent>
   <TabContent name="code">
-    <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/LateDelay.tsx`} />
+    <LoadedCode from={GITHUB_STORY("Tooltip", "LateDelay")} />
   </TabContent>
 </TabProvider>
 
@@ -201,6 +201,6 @@ import { Tooltip, TooltipContent } from "@components/Tooltip";
     </Story>
   </TabContent>
   <TabContent name={"code"}>
-    <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/Controlled.tsx`} />
+    <LoadedCode from={GITHUB_STORY("Tooltip", "Controlled")} />
   </TabContent>
 </TabProvider>
\ No newline at end of file