diff --git a/packages/react/src/App.tsx b/packages/react/src/App.tsx
index 71b0d02..fab6504 100644
--- a/packages/react/src/App.tsx
+++ b/packages/react/src/App.tsx
@@ -27,6 +27,10 @@ import ComponentsCheckbox, {
 import ComponentsDialog, {
   tableOfContents as componentsDialogToc,
 } from "./docs/components/Dialog.mdx";
+import ComponentsDrawer, {
+  tableOfContents as componentsDrawerToc,
+} from "./docs/components/Drawer.mdx";
+
 import { ForwardedRef, forwardRef, useContext, useEffect, useRef } from "react";
 import { HeadingContext } from "./HeadingContext";
 
@@ -159,6 +163,14 @@ const router = createBrowserRouter(
               </DynamicLayout>
             }
           />
+          <Route
+            path="drawer"
+            element={
+              <DynamicLayout toc={componentsDrawerToc}>
+                <ComponentsDrawer components={overrideComponents} />
+              </DynamicLayout>
+            }
+          />
         </Route>
       </Route>
     </Route>
diff --git a/packages/react/src/RouteObject.ts b/packages/react/src/RouteObject.ts
index 8460b44..d4d259d 100644
--- a/packages/react/src/RouteObject.ts
+++ b/packages/react/src/RouteObject.ts
@@ -44,6 +44,11 @@ export default {
         path: "/docs/components/dialog",
         name: "Dialog",
         eq: (pathname: string) => pathname === "/docs/components/dialog"
+      },
+      {
+        path: "/docs/components/drawer",
+        name: "Drawer",
+        eq: (pathname: string) => pathname === "/docs/components/drawer"
       }
     ]
   }