diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
index c1a9aca..22e5d70 100644
--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@@ -4,7 +4,7 @@ name: Deploy static content to Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ["main"]
+    branches: ['main']
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -18,7 +18,7 @@ permissions:
 # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
 # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
 concurrency:
-  group: "pages"
+  group: 'pages'
   cancel-in-progress: false
 
 jobs:
diff --git a/package-lock.json b/package-lock.json
index cfcc8f6..67d6c45 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
 			"version": "0.1.0",
 			"dependencies": {
 				"@gem-mine/docsify-react-live": "^1.7.1",
+				"@stackblitz/sdk": "^1.11.0",
 				"class-variance-authority": "^0.7.0",
 				"clsx": "^2.1.1",
 				"lucide-react": "^0.454.0",
@@ -639,6 +640,11 @@
 				"node": ">=14"
 			}
 		},
+		"node_modules/@stackblitz/sdk": {
+			"version": "1.11.0",
+			"resolved": "https://registry.npmjs.org/@stackblitz/sdk/-/sdk-1.11.0.tgz",
+			"integrity": "sha512-DFQGANNkEZRzFk1/rDP6TcFdM82ycHE+zfl9C/M/jXlH68jiqHWHFMQURLELoD8koxvu/eW5uhg94NSAZlYrUQ=="
+		},
 		"node_modules/@swc/counter": {
 			"version": "0.1.3",
 			"resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
diff --git a/package.json b/package.json
index e8df5fd..424afe4 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
 	},
 	"dependencies": {
 		"@gem-mine/docsify-react-live": "^1.7.1",
+		"@stackblitz/sdk": "^1.11.0",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.1",
 		"lucide-react": "^0.454.0",
diff --git a/src/docs/README.md b/src/docs/README.md
index 29aca67..f3daf08 100644
--- a/src/docs/README.md
+++ b/src/docs/README.md
@@ -1 +1 @@
-# Bless UI Docs
\ No newline at end of file
+# Bless UI Docs
diff --git a/src/docs/components/examples/input.tsx b/src/docs/components/examples/input.tsx
new file mode 100644
index 0000000..9b2d620
--- /dev/null
+++ b/src/docs/components/examples/input.tsx
@@ -0,0 +1,17 @@
+import { Input } from '@/components/ui'
+
+const DemoInput = () => {
+	return (
+		/// [demo_input]
+		<Input placeholder="Email" type="email" />
+		/// [demo_input]
+	)
+}
+
+export function Demo() {
+	return (
+		<div className="flex w-[600px] h-[200px] p-4 my-4">
+			<DemoInput />
+		</div>
+	)
+}
diff --git a/src/docs/components/input.md b/src/docs/components/input.md
index 251abe6..9c421f8 100644
--- a/src/docs/components/input.md
+++ b/src/docs/components/input.md
@@ -1,5 +1,14 @@
 # Input
 
+<!-- [input.tsx](examples/input.tsx ':include :type=code :fragment=demo_input') -->
 
+```tsx
+  <TextField id="outlined-basic" label="Outlined" variant="outlined" />
+  <TextField id="filled-basic" label="Filled" variant="filled" />
+  <TextField id="standard-basic" label="Standard" variant="standard" />
+```
+
+<iframe src="https://stackblitz.com/edit/react-ctfd93?embed=1&file=Demo.tsx&hideExplorer=1&hideNavigation=1&view=editor" style="width:100%; height: 400px; border:0; border-radius: 4px; overflow:hidden;"></iframe>
+
+<iframe src="https://react-ctfd93.stackblitz.io" style="width:100%; height: 400px; border:0; border-radius: 4px; overflow:hidden;"></iframe>
 
-<iframe src="https://stackblitz.com/edit/react-starter-eval-dwegeb?embed=1&file=src%2FApp.js" style="width:100%; height: 400px; border:0; border-radius: 4px; overflow:hidden;"></iframe>
diff --git a/src/docs/index.html b/src/docs/index.html
index 0ce1d36..10232ec 100644
--- a/src/docs/index.html
+++ b/src/docs/index.html
@@ -26,6 +26,11 @@
 					noData: 'No Results!',
 					depth: 6,
 					hideOtherSidebarContent: false // whether or not to hide other sidebar content
+				},
+				copyCode: {
+					buttonText: 'Copy',
+					errorText: 'Error',
+					successText: 'Copied'
 				}
 			}
 		</script>
@@ -33,5 +38,6 @@
 		<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
 		<script src="//cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-jsx.min.js"></script>
 		<script src="//cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-typescript.min.js"></script>
+		<script src="https://unpkg.com/docsify-copy-code@2"></script>
 	</body>
 </html>
diff --git a/src/examples/input.tsx b/src/examples/input.tsx
deleted file mode 100644
index 7f6feaf..0000000
--- a/src/examples/input.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Input } from '@/components/ui'
-
-export function InputDemo() {
-	return (
-		/// [demo_input]
-		<main className="flex-1 items-center justify-items-center p-12 bg-slate">
-			<div className="flex w-[600px] h-[200px] p-4 my-4">
-				<Input placeholder="Email" type="email" />
-			</div>
-		</main>
-		/// [demo_input]
-	)
-}