diff --git a/apps/docs/src/components/CodeBlock.tsx b/apps/docs/src/components/CodeBlock.tsx
deleted file mode 100644
index ac5cd87..0000000
--- a/apps/docs/src/components/CodeBlock.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-export const CodeBlock = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <code className="block p-3 bg-muted rounded text-sm mt-4">{children}</code>
-  );
-};
diff --git a/apps/docs/src/components/index.ts b/apps/docs/src/components/index.ts
index 1280b48..4f41e87 100644
--- a/apps/docs/src/components/index.ts
+++ b/apps/docs/src/components/index.ts
@@ -1,3 +1,2 @@
-export * from "./CodeBlock";
 export * from "./FlexyHandle";
 export * from "./TopNavbar";
diff --git a/apps/docs/src/pages/ApiReferencePage.tsx b/apps/docs/src/pages/ApiReferencePage.tsx
index 99c60ed..6166da3 100644
--- a/apps/docs/src/pages/ApiReferencePage.tsx
+++ b/apps/docs/src/pages/ApiReferencePage.tsx
@@ -8,7 +8,7 @@ import {
   TableHead,
   TableCell,
 } from "@rlx-widgets/table";
-import { CodeBlock } from "../components";
+import { CodeBlock } from "@rlx-components/code-block";
 import { ShikiCodeBlock } from "@rlx-components/shiki-code-block";
 import { InlineCode } from "@rlx-components/inline-code";
 
@@ -270,7 +270,7 @@ function MyComponent() {
           definitions. All components and types are exported from the main entry
           point:
         </Paragraph>
-        <CodeBlock>
+        <CodeBlock className="mt-4">
           {`import type { Direction, FlexyPanelRef } from "react-flexy-panels";`}
         </CodeBlock>
       </div>
diff --git a/apps/docs/src/styles.css b/apps/docs/src/styles.css
index 10a56db..3c7f8d7 100644
--- a/apps/docs/src/styles.css
+++ b/apps/docs/src/styles.css
@@ -158,6 +158,10 @@
 	@apply bg-transparent;
 }
 
+.dark-scroll::-webkit-scrollbar-thumb {
+  @apply bg-muted-foreground/40;
+}
+
 pre {
   font-family: "Lato";
 }
diff --git a/package.json b/package.json
index f882183..b32f5ec 100644
--- a/package.json
+++ b/package.json
@@ -89,8 +89,9 @@
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.2.4",
+    "@rlx-components/code-block": "^0.0.1",
     "@rlx-components/code-preview-tabs": "^0.0.6",
-    "@rlx-components/inline-code": "^0.0.1",
+    "@rlx-components/inline-code": "^0.0.2",
     "@rlx-components/shiki-code-block": "^0.0.4",
     "@rlx-components/theme-toggle": "^0.0.2",
     "@rlx-hooks/use-is-mobile": "^0.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3741dc4..6976980 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,12 +11,15 @@ importers:
       '@radix-ui/react-slot':
         specifier: ^1.2.4
         version: 1.2.4(@types/react@19.2.6)(react@19.2.0)
+      '@rlx-components/code-block':
+        specifier: ^0.0.1
+        version: 0.0.1(@rlx-widgets/base@0.0.3(clsx@2.1.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(tailwind-merge@3.4.0))(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@rlx-components/code-preview-tabs':
         specifier: ^0.0.6
         version: 0.0.6(e501046ad37f8901670604d2f304b6ff)
       '@rlx-components/inline-code':
-        specifier: ^0.0.1
-        version: 0.0.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+        specifier: ^0.0.2
+        version: 0.0.2(@rlx-widgets/base@0.0.3(clsx@2.1.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(tailwind-merge@3.4.0))(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@rlx-components/shiki-code-block':
         specifier: ^0.0.4
         version: 0.0.4(@rlx-widgets/base@0.0.3(clsx@2.1.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(tailwind-merge@3.4.0))(@rlx-widgets/button@0.0.2(@radix-ui/react-slot@1.2.4(@types/react@19.2.6)(react@19.2.0))(@rlx-widgets/base@0.0.3(clsx@2.1.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(tailwind-merge@3.4.0))(class-variance-authority@0.7.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(hast-util-to-jsx-runtime@2.3.6)(lucide-react@0.554.0(react@19.2.0))(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(shiki@3.15.0)
@@ -2111,6 +2114,13 @@ packages:
   '@radix-ui/rect@1.1.1':
     resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
 
+  '@rlx-components/code-block@0.0.1':
+    resolution: {integrity: sha512-oH/e/Xbyax6XdPf3h42o8m+7ZMArdekcDaPfKm0sQMNyx40v/XfRb9bifBPg7H+JX8ZKovGG3d8FUTTCapn7ug==}
+    peerDependencies:
+      '@rlx-widgets/base': '>=0.0.3'
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+
   '@rlx-components/code-preview-tabs@0.0.6':
     resolution: {integrity: sha512-tvtn2RREydcMIgpc9Idf8lwSEnW4734MHoukDU4Xu9DEiLnE9u9ZGZJ2lDAv4ZFjQVrIR5jvJ2lNf7pWwXvMag==}
     peerDependencies:
@@ -2121,9 +2131,10 @@ packages:
       react: '>=18.0.0'
       react-dom: '>=18.0.0'
 
-  '@rlx-components/inline-code@0.0.1':
-    resolution: {integrity: sha512-MxLm0vbthiaA3tLzkavYSPCcdK0/PfmeygGjQzGlVOR90E1h6q11rxufCBnRtJRkPR3PSLnqieL3QYapIO3evQ==}
+  '@rlx-components/inline-code@0.0.2':
+    resolution: {integrity: sha512-TLDgrcfcVCNhhbLBVhBMRH+ekFEIOqNHtOrLtI2o9gC9FGte6wYw19ioOh6ylM3vwVwReBffWQE7W9BgOjC7mg==}
     peerDependencies:
+      '@rlx-widgets/base': '>=0.0.3'
       react: '>=18.0.0'
       react-dom: '>=18.0.0'
 
@@ -10865,6 +10876,12 @@ snapshots:
 
   '@radix-ui/rect@1.1.1': {}
 
+  '@rlx-components/code-block@0.0.1(@rlx-widgets/base@0.0.3(clsx@2.1.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(tailwind-merge@3.4.0))(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@rlx-widgets/base': 0.0.3(clsx@2.1.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(tailwind-merge@3.4.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+
   '@rlx-components/code-preview-tabs@0.0.6(e501046ad37f8901670604d2f304b6ff)':
     dependencies:
       '@rlx-components/shiki-code-block': 0.0.4(@rlx-widgets/base@0.0.3(clsx@2.1.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(tailwind-merge@3.4.0))(@rlx-widgets/button@0.0.2(@radix-ui/react-slot@1.2.4(@types/react@19.2.6)(react@19.2.0))(@rlx-widgets/base@0.0.3(clsx@2.1.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(tailwind-merge@3.4.0))(class-variance-authority@0.7.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(hast-util-to-jsx-runtime@2.3.6)(lucide-react@0.554.0(react@19.2.0))(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(shiki@3.15.0)
@@ -10874,8 +10891,9 @@ snapshots:
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)
 
-  '@rlx-components/inline-code@0.0.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@rlx-components/inline-code@0.0.2(@rlx-widgets/base@0.0.3(clsx@2.1.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(tailwind-merge@3.4.0))(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
+      '@rlx-widgets/base': 0.0.3(clsx@2.1.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(tailwind-merge@3.4.0)
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)