diff --git a/src/docs/components/Dialog.mdx b/src/docs/components/Dialog.mdx
index f993896..5429b78 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_COMP, GITHUB_COMP_PREVIEW, GITHUB_STORY } from "@/components/LoadedCode";
+import { LoadedCode, GITHUB_DIR_COMP, GITHUB_COMP_PREVIEW, GITHUB_STORY } from "@/components/LoadedCode";
 import { DialogDemo } from "./DialogBlocks/Preview";
 import Examples from "./DialogBlocks/Examples";
 
@@ -24,10 +24,14 @@ A modal window that prompts the user to take an action or provides critical info
 
 ## Installation
 
-1. Create a new file `Dialog.tsx` in your component folder.
-2. Copy and paste the following code into the file.
-
-<LoadedCode from={GITHUB_COMP("Dialog")} />
+1. Create a new directory named `Dialog` in your component folder.
+2. Create following files in the folder, and paste the code into the file.
+  * `index.ts`
+    <LoadedCode from={GITHUB_DIR_COMP("Dialog", "index.ts")} />
+  * `Context.ts`
+    <LoadedCode from={GITHUB_DIR_COMP("Dialog", "Context.ts")} />
+  * `Component.tsx`
+    <LoadedCode from={GITHUB_DIR_COMP("Dialog", "Component.tsx")} />
 
 ## Usage
 
diff --git a/src/docs/components/Tabs.mdx b/src/docs/components/Tabs.mdx
index 35e2000..6b1c3ba 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_COMP, GITHUB_COMP_PREVIEW } from "@/components/LoadedCode";
+import { LoadedCode, GITHUB_DIR_COMP, GITHUB_COMP_PREVIEW } from "@/components/LoadedCode";
 import { TabsDemo } from "./TabsBlocks/Preview";
 
 # Tabs
@@ -23,10 +23,16 @@ Organizes content into multiple sections with tabbed navigation.
 
 ## Installation
 
-1. Create a new file `Tabs.tsx` in your component folder.
-2. Copy and paste the following code into the file.
-
-<LoadedCode from={GITHUB_COMP("Tabs")} />
+1. Create a new directory named `Tabs` in your component folder.
+2. Create following files in the folder, and paste the code into the file.
+  * `index.ts`
+    <LoadedCode from={GITHUB_DIR_COMP("Tabs", "index.ts")} />
+  * `Component.tsx`
+    <LoadedCode from={GITHUB_DIR_COMP("Tabs", "Component.tsx")} />
+  * `Context.ts`
+    <LoadedCode from={GITHUB_DIR_COMP("Tabs", "Context.ts")} />
+  * `Hook.ts`
+    <LoadedCode from={GITHUB_DIR_COMP("Tabs", "Hook.ts")} />
 
 ## Usage
 
diff --git a/src/docs/components/Toast.mdx b/src/docs/components/Toast.mdx
index ee83950..cf4290b 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_STORY, GITHUB_COMP, GITHUB_COMP_PREVIEW } from "@/components/LoadedCode";
+import { LoadedCode, GITHUB_STORY, GITHUB_DIR_COMP, GITHUB_COMP_PREVIEW } from "@/components/LoadedCode";
 import { ToastDemo } from "./ToastBlocks/Preview";
 import Examples from "./ToastBlocks/Examples";
 
@@ -24,10 +24,18 @@ A brief message alert to inform users about events or actions.
 
 ## Installation
 
-1. Create a new file `Toast.tsx` in your component folder.
-2. Copy and paste the following code into the file.
-
-<LoadedCode from={GITHUB_COMP("Toast")} />
+1. Create a new directory named `Toast` in your component folder.
+2. Create following files in the folder, and paste the code into the file.
+  * `index.ts`
+    <LoadedCode from={GITHUB_DIR_COMP("Toast", "index.ts")} />
+  * `Variant.ts`
+    <LoadedCode from={GITHUB_DIR_COMP("Toast", "Variant.ts")} />
+  * `Store.ts`
+    <LoadedCode from={GITHUB_DIR_COMP("Toast", "Store.ts")} />
+  * `Component.tsx`
+    <LoadedCode from={GITHUB_DIR_COMP("Toast", "Component.tsx")} />
+  * `Hook.ts`
+    <LoadedCode from={GITHUB_DIR_COMP("Toast", "Hook.ts")} />
 
 ## Usage