diff --git a/packages/react/src/App.tsx b/packages/react/src/App.tsx
index fab6504..d4f5541 100644
--- a/packages/react/src/App.tsx
+++ b/packages/react/src/App.tsx
@@ -30,6 +30,9 @@ import ComponentsDialog, {
 import ComponentsDrawer, {
   tableOfContents as componentsDrawerToc,
 } from "./docs/components/Drawer.mdx";
+import ComponentsTabs, {
+  tableOfContents as componentsTabsToc,
+} from "./docs/components/Tabs.mdx";
 
 import { ForwardedRef, forwardRef, useContext, useEffect, useRef } from "react";
 import { HeadingContext } from "./HeadingContext";
@@ -171,6 +174,14 @@ const router = createBrowserRouter(
               </DynamicLayout>
             }
           />
+          <Route
+            path="tabs"
+            element={
+              <DynamicLayout toc={componentsTabsToc}>
+                <ComponentsTabs components={overrideComponents} />
+              </DynamicLayout>
+            }
+          />
         </Route>
       </Route>
     </Route>
diff --git a/packages/react/src/RouteObject.ts b/packages/react/src/RouteObject.ts
index d4d259d..accb2d1 100644
--- a/packages/react/src/RouteObject.ts
+++ b/packages/react/src/RouteObject.ts
@@ -49,6 +49,11 @@ export default {
         path: "/docs/components/drawer",
         name: "Drawer",
         eq: (pathname: string) => pathname === "/docs/components/drawer"
+      },
+      {
+        path: "/docs/components/tabs",
+        name: "Tabs",
+        eq: (pathname: string) => pathname === "/docs/components/tabs"
       }
     ]
   }
diff --git a/packages/react/src/docs/components/Tabs.mdx b/packages/react/src/docs/components/Tabs.mdx
new file mode 100644
index 0000000..67b5079
--- /dev/null
+++ b/packages/react/src/docs/components/Tabs.mdx
@@ -0,0 +1,30 @@
+import { Button } from "@components/Button";
+import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
+import { Story } from "@/components/Story";
+import { LoadedCode, GITHUB } from "@/components/LoadedCode";
+import { TabsDemo } from "./TabsBlocks/Preview";
+
+# Tabs
+Organizes content into multiple sections with tabbed navigation.
+
+<TabProvider defaultName="preview">
+    <TabList>
+        <TabTrigger name="preview">Preview</TabTrigger>
+        <TabTrigger name="code">Code</TabTrigger>
+    </TabList>
+    <TabContent name="preview">
+        <Story layout="centered" className="flex-col [&>*]:w-full">
+            <TabsDemo />
+        </Story>
+    </TabContent>
+    <TabContent name="code">
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TabsBlocks/Preview.tsx`} />
+    </TabContent>
+</TabProvider>
+
+## 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}/packages/react/components/Tabs.tsx`} />
diff --git a/packages/react/src/docs/components/TabsBlocks/Preview.tsx b/packages/react/src/docs/components/TabsBlocks/Preview.tsx
new file mode 100644
index 0000000..dc6fc04
--- /dev/null
+++ b/packages/react/src/docs/components/TabsBlocks/Preview.tsx
@@ -0,0 +1,18 @@
+import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
+
+export function TabsDemo() {
+  return (
+    <TabProvider defaultName="tab1">
+      <TabList>
+        <TabTrigger name="tab1">Tab 1</TabTrigger>
+        <TabTrigger name="tab2">Tab 2</TabTrigger>
+      </TabList>
+      <TabContent name="tab1">
+        <div className="w-full text-center">Tab 1 Content</div>
+      </TabContent>
+      <TabContent name="tab2">
+        <div className="w-full text-center">Tab 2 Content</div>
+      </TabContent>
+    </TabProvider>
+  );
+}