diff --git a/packages/react/src/docs/components/Drawer.mdx b/packages/react/src/docs/components/Drawer.mdx
new file mode 100644
index 0000000..1b818be
--- /dev/null
+++ b/packages/react/src/docs/components/Drawer.mdx
@@ -0,0 +1,204 @@
+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 { DrawerDemo } from "./DrawerBlocks/Preview";
+import Examples from "./DrawerBlocks/Examples";
+
+# Drawer
+Displays a panel that slides out from the edge of the screen, typically used for navigation or additional content.
+
+<TabProvider defaultName="preview">
+    <TabList>
+        <TabTrigger name="preview">Preview</TabTrigger>
+        <TabTrigger name="code">Code</TabTrigger>
+    </TabList>
+  <TabContent name="preview">
+    <Story layout="centered">
+        <DrawerDemo />
+    </Story>
+  </TabContent>
+  <TabContent name="code">
+    <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DrawerBlocks/Preview.tsx`} />
+  </TabContent>
+</TabProvider>
+
+## Installation
+
+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`} />
+
+## Usage
+
+```tsx
+import {
+    DrawerRoot,
+    DrawerTrigger,
+    DrawerOverlay,
+    DrawerContent,
+    DrawerClose,
+    DrawerHeader,
+    DrawerBody,
+    DrawerFooter,
+} from "@components/Drawer"; 
+```
+
+```html
+<DrawerRoot>
+    <DrawerTrigger>
+        <Button>Open Drawer</Button>
+    </DrawerTrigger>
+    <DrawerOverlay>
+        <DrawerContent>
+            <DrawerHeader>
+                <h1 className="text-2xl font-bold">Drawer</h1>
+            </DrawerHeader>
+            <DrawerBody>
+                {/* Main Contents */}
+            </DrawerBody>
+            <DrawerFooter>
+                <DrawerClose>
+                    <Button>Close Drawer</Button>
+                </DrawerClose>
+            </DrawerFooter>
+        </DrawerContent>
+    </DrawerOverlay>
+</DrawerRoot>
+```
+
+> Note:
+> 
+> DrawerTrigger and DrawerClose will merge its onClick event handler to its children.
+> Also, there is no default element for those.
+> So you always have to provide the clickable children for DialogTrigger and DialogClose.
+>
+> It is easier to understand if you think of this component as always having the `asChild` prop applied to it.
+
+## Props
+
+### DrawerRoot
+
+#### Special
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| `closeThreshold` | `number` | `0.3` | The threshold for the drawer to close with swipe or drag. |
+| `opened` | `boolean` | - (Controlled) | Whether the drawer is opened. |
+
+### DrawerOverlay
+
+#### Special
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| `asChild` | `boolean` | `false` | Whether the component is rendered as a child of a component |
+
+### DrawerContent
+
+#### Variants
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| `position` | `"top" \| "bottom" \| "left" \| "right"` | `"left"` | The position of the drawer |
+
+#### Special
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| `asChild` | `boolean` | `false` | Whether the component is rendered as a child of a component |
+
+### DrawerHeader
+
+#### Special
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| `asChild` | `boolean` | `false` | Whether the component is rendered as a child of a component |
+
+### DrawerBody
+
+#### Special
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| `asChild` | `boolean` | `false` | Whether the component is rendered as a child of a component |
+
+### DrawerFooter
+
+#### Special
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| `asChild` | `boolean` | `false` | Whether the component is rendered as a child of a component |
+
+## Examples
+
+### Left
+
+<TabProvider defaultName="preview">
+    <TabList>
+        <TabTrigger name="preview">Preview</TabTrigger>
+        <TabTrigger name="code">Code</TabTrigger>
+    </TabList>
+    <TabContent name="preview">
+        <Story layout="centered">
+            <Examples.Left />
+        </Story>
+    </TabContent>
+    <TabContent name="code">
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DrawerBlocks/Examples/Left.tsx`} />
+    </TabContent>
+</TabProvider>
+
+### Right
+
+<TabProvider defaultName="preview">
+    <TabList>
+        <TabTrigger name="preview">Preview</TabTrigger>
+        <TabTrigger name="code">Code</TabTrigger>
+    </TabList>
+    <TabContent name="preview">
+        <Story layout="centered">
+            <Examples.Right />
+        </Story>
+    </TabContent>
+    <TabContent name="code">
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DrawerBlocks/Examples/Right.tsx`} />
+    </TabContent>
+</TabProvider>
+
+### Top
+
+<TabProvider defaultName="preview">
+    <TabList>
+        <TabTrigger name="preview">Preview</TabTrigger>
+        <TabTrigger name="code">Code</TabTrigger>
+    </TabList>
+    <TabContent name="preview">
+        <Story layout="centered">
+            <Examples.Top />
+        </Story>
+    </TabContent>
+    <TabContent name="code">
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DrawerBlocks/Examples/Top.tsx`} />
+    </TabContent>
+</TabProvider>
+
+### Bottom
+
+<TabProvider defaultName="preview">
+    <TabList>
+        <TabTrigger name="preview">Preview</TabTrigger>
+        <TabTrigger name="code">Code</TabTrigger>
+    </TabList>
+    <TabContent name="preview">
+        <Story layout="centered">
+            <Examples.Bottom />
+        </Story>
+    </TabContent>
+    <TabContent name="code">
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DrawerBlocks/Examples/Bottom.tsx`} />
+    </TabContent>
+</TabProvider>
diff --git a/packages/react/src/docs/components/DrawerBlocks/Examples/Bottom.tsx b/packages/react/src/docs/components/DrawerBlocks/Examples/Bottom.tsx
new file mode 100644
index 0000000..6b9a856
--- /dev/null
+++ b/packages/react/src/docs/components/DrawerBlocks/Examples/Bottom.tsx
@@ -0,0 +1,40 @@
+import {
+  DrawerRoot,
+  DrawerTrigger,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  DrawerClose,
+} from "@components/Drawer";
+import { Button } from "@components/Button";
+
+export const Bottom = () => {
+  return (
+    <DrawerRoot>
+      <DrawerTrigger>
+        <Button>Open Drawer</Button>
+      </DrawerTrigger>
+      <DrawerOverlay className="z-[99]">
+        <DrawerContent position="bottom">
+          <DrawerHeader>
+            <h1 className="text-2xl font-bold">Drawer</h1>
+          </DrawerHeader>
+          <DrawerBody>
+            <p>
+              Drawers are a type of overlay that slides in from the edge of the
+              screen. They are typically used for navigation or additional
+              content.
+            </p>
+          </DrawerBody>
+          <DrawerFooter>
+            <DrawerClose>
+              <Button>Done</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </DrawerContent>
+      </DrawerOverlay>
+    </DrawerRoot>
+  );
+};
diff --git a/packages/react/src/docs/components/DrawerBlocks/Examples/Left.tsx b/packages/react/src/docs/components/DrawerBlocks/Examples/Left.tsx
new file mode 100644
index 0000000..31928e3
--- /dev/null
+++ b/packages/react/src/docs/components/DrawerBlocks/Examples/Left.tsx
@@ -0,0 +1,40 @@
+import {
+  DrawerRoot,
+  DrawerTrigger,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  DrawerClose,
+} from "@components/Drawer";
+import { Button } from "@components/Button";
+
+export const Left = () => {
+  return (
+    <DrawerRoot>
+      <DrawerTrigger>
+        <Button>Open Drawer</Button>
+      </DrawerTrigger>
+      <DrawerOverlay className="z-[99]">
+        <DrawerContent position="left" className="max-w-[320px]">
+          <DrawerHeader>
+            <h1 className="text-2xl font-bold">Drawer</h1>
+          </DrawerHeader>
+          <DrawerBody>
+            <p>
+              Drawers are a type of overlay that slides in from the edge of the
+              screen. They are typically used for navigation or additional
+              content.
+            </p>
+          </DrawerBody>
+          <DrawerFooter>
+            <DrawerClose>
+              <Button>Done</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </DrawerContent>
+      </DrawerOverlay>
+    </DrawerRoot>
+  );
+};
diff --git a/packages/react/src/docs/components/DrawerBlocks/Examples/Right.tsx b/packages/react/src/docs/components/DrawerBlocks/Examples/Right.tsx
new file mode 100644
index 0000000..369bf88
--- /dev/null
+++ b/packages/react/src/docs/components/DrawerBlocks/Examples/Right.tsx
@@ -0,0 +1,40 @@
+import {
+  DrawerRoot,
+  DrawerTrigger,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  DrawerClose,
+} from "@components/Drawer";
+import { Button } from "@components/Button";
+
+export const Right = () => {
+  return (
+    <DrawerRoot>
+      <DrawerTrigger>
+        <Button>Open Drawer</Button>
+      </DrawerTrigger>
+      <DrawerOverlay className="z-[99]">
+        <DrawerContent position="right" className="max-w-[320px]">
+          <DrawerHeader>
+            <h1 className="text-2xl font-bold">Drawer</h1>
+          </DrawerHeader>
+          <DrawerBody>
+            <p>
+              Drawers are a type of overlay that slides in from the edge of the
+              screen. They are typically used for navigation or additional
+              content.
+            </p>
+          </DrawerBody>
+          <DrawerFooter>
+            <DrawerClose>
+              <Button>Done</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </DrawerContent>
+      </DrawerOverlay>
+    </DrawerRoot>
+  );
+};
diff --git a/packages/react/src/docs/components/DrawerBlocks/Examples/Top.tsx b/packages/react/src/docs/components/DrawerBlocks/Examples/Top.tsx
new file mode 100644
index 0000000..79fc096
--- /dev/null
+++ b/packages/react/src/docs/components/DrawerBlocks/Examples/Top.tsx
@@ -0,0 +1,40 @@
+import {
+  DrawerRoot,
+  DrawerTrigger,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  DrawerClose,
+} from "@components/Drawer";
+import { Button } from "@components/Button";
+
+export const Top = () => {
+  return (
+    <DrawerRoot>
+      <DrawerTrigger>
+        <Button>Open Drawer</Button>
+      </DrawerTrigger>
+      <DrawerOverlay className="z-[99]">
+        <DrawerContent position="top">
+          <DrawerHeader>
+            <h1 className="text-2xl font-bold">Drawer</h1>
+          </DrawerHeader>
+          <DrawerBody>
+            <p>
+              Drawers are a type of overlay that slides in from the edge of the
+              screen. They are typically used for navigation or additional
+              content.
+            </p>
+          </DrawerBody>
+          <DrawerFooter>
+            <DrawerClose>
+              <Button>Done</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </DrawerContent>
+      </DrawerOverlay>
+    </DrawerRoot>
+  );
+};
diff --git a/packages/react/src/docs/components/DrawerBlocks/Examples/index.ts b/packages/react/src/docs/components/DrawerBlocks/Examples/index.ts
new file mode 100644
index 0000000..d1d88b9
--- /dev/null
+++ b/packages/react/src/docs/components/DrawerBlocks/Examples/index.ts
@@ -0,0 +1,7 @@
+import { Left } from "./Left";
+import { Right } from "./Right";
+import { Top } from "./Top";
+import { Bottom } from "./Bottom";
+
+export default { Left, Right, Top, Bottom };
+
diff --git a/packages/react/src/docs/components/DrawerBlocks/Preview.tsx b/packages/react/src/docs/components/DrawerBlocks/Preview.tsx
new file mode 100644
index 0000000..fb749fa
--- /dev/null
+++ b/packages/react/src/docs/components/DrawerBlocks/Preview.tsx
@@ -0,0 +1,40 @@
+import { Button } from "@components/Button";
+import {
+  DrawerRoot,
+  DrawerTrigger,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerClose,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+} from "@components/Drawer";
+
+export const DrawerDemo = () => {
+  return (
+    <DrawerRoot>
+      <DrawerTrigger>
+        <Button>Open Drawer</Button>
+      </DrawerTrigger>
+      <DrawerOverlay className="z-[99]">
+        <DrawerContent className="max-w-[320px]">
+          <DrawerHeader>
+            <h1 className="text-2xl font-bold">Drawer</h1>
+          </DrawerHeader>
+          <DrawerBody>
+            <p>
+              Drawers are a type of overlay that slides in from the edge of the
+              screen. They are typically used for navigation or additional
+              content.
+            </p>
+          </DrawerBody>
+          <DrawerFooter>
+            <DrawerClose>
+              <Button>Close</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </DrawerContent>
+      </DrawerOverlay>
+    </DrawerRoot>
+  );
+};