diff --git a/apps/web/examples/drawer/drawer.backdrop.tsx b/apps/web/examples/drawer/drawer.backdrop.tsx
index fc0b7b760..24172680a 100644
--- a/apps/web/examples/drawer/drawer.backdrop.tsx
+++ b/apps/web/examples/drawer/drawer.backdrop.tsx
@@ -1,17 +1,6 @@
 "use client";
 
-import {
-  Button,
-  Drawer,
-  DrawerHeader,
-  DrawerItems,
-  Sidebar,
-  SidebarItem,
-  SidebarItemGroup,
-  SidebarItems,
-  TextInput,
-  theme,
-} from "flowbite-react";
+import { Button, Drawer, Sidebar, TextInput } from "flowbite-react";
 import { useState } from "react";
 import {
   HiChartPie,
@@ -24,18 +13,12 @@ import {
   HiShoppingBag,
   HiUsers,
 } from "react-icons/hi";
-import { twMerge } from "tailwind-merge";
 import type { CodeData } from "~/components/code-demo";
 
 const code = `
 "use client";
 
-import {
-  Button,
-  Drawer,
-  Sidebar,
-  TextInput,
-} from "flowbite-react";
+import { Button, Drawer, Sidebar, TextInput } from "flowbite-react";
 import { useState } from "react";
 import {
   HiChartPie,
@@ -49,7 +32,7 @@ import {
   HiUsers,
 } from "react-icons/hi";
 
-function Component() {
+export function Component() {
   const [isOpen, setIsOpen] = useState(true);
 
   const handleClose = () => setIsOpen(false);
@@ -110,32 +93,8 @@ function Component() {
   );
 }
 `;
-const codeRSC = `
-import {
-  Button,
-  Drawer,
-  DrawerHeader,
-  DrawerItems,
-  Sidebar,
-  SidebarItem,
-  SidebarItemGroup,
-  SidebarItems,
-  TextInput,
-} from "flowbite-react";
-import { useState } from "react";
-import {
-  HiChartPie,
-  HiClipboard,
-  HiCollection,
-  HiInformationCircle,
-  HiLogin,
-  HiPencil,
-  HiSearch,
-  HiShoppingBag,
-  HiUsers,
-} from "react-icons/hi";
 
-function Component() {
+export function Component() {
   const [isOpen, setIsOpen] = useState(true);
 
   const handleClose = () => setIsOpen(false);
@@ -146,8 +105,8 @@ function Component() {
         <Button onClick={() => setIsOpen(true)}>Show navigation</Button>
       </div>
       <Drawer open={isOpen} onClose={handleClose}>
-        <DrawerHeader title="MENU" titleIcon={() => <></>} />
-        <DrawerItems>
+        <Drawer.Header title="MENU" titleIcon={() => <></>} />
+        <Drawer.Items>
           <Sidebar
             aria-label="Sidebar with multi-level dropdown example"
             className="[&>div]:bg-transparent [&>div]:p-0"
@@ -157,121 +116,44 @@ function Component() {
                 <form className="pb-3 md:hidden">
                   <TextInput icon={HiSearch} type="search" placeholder="Search" required size={32} />
                 </form>
-                <SidebarItems>
-                  <SidebarItemGroup>
-                    <SidebarItem href="/" icon={HiChartPie}>
+                <Sidebar.Items>
+                  <Sidebar.ItemGroup>
+                    <Sidebar.Item href="/" icon={HiChartPie}>
                       Dashboard
-                    </SidebarItem>
-                    <SidebarItem href="/e-commerce/products" icon={HiShoppingBag}>
+                    </Sidebar.Item>
+                    <Sidebar.Item href="/e-commerce/products" icon={HiShoppingBag}>
                       Products
-                    </SidebarItem>
-                    <SidebarItem href="/users/list" icon={HiUsers}>
+                    </Sidebar.Item>
+                    <Sidebar.Item href="/users/list" icon={HiUsers}>
                       Users list
-                    </SidebarItem>
-                    <SidebarItem href="/authentication/sign-in" icon={HiLogin}>
+                    </Sidebar.Item>
+                    <Sidebar.Item href="/authentication/sign-in" icon={HiLogin}>
                       Sign in
-                    </SidebarItem>
-                    <SidebarItem href="/authentication/sign-up" icon={HiPencil}>
+                    </Sidebar.Item>
+                    <Sidebar.Item href="/authentication/sign-up" icon={HiPencil}>
                       Sign up
-                    </SidebarItem>
-                  </SidebarItemGroup>
-                  <SidebarItemGroup>
-                    <SidebarItem href="https://github.com/themesberg/flowbite-react/" icon={HiClipboard}>
+                    </Sidebar.Item>
+                  </Sidebar.ItemGroup>
+                  <Sidebar.ItemGroup>
+                    <Sidebar.Item href="https://github.com/themesberg/flowbite-react/" icon={HiClipboard}>
                       Docs
-                    </SidebarItem>
-                    <SidebarItem href="https://flowbite-react.com/" icon={HiCollection}>
+                    </Sidebar.Item>
+                    <Sidebar.Item href="https://flowbite-react.com/" icon={HiCollection}>
                       Components
-                    </SidebarItem>
-                    <SidebarItem href="https://github.com/themesberg/flowbite-react/issues" icon={HiInformationCircle}>
+                    </Sidebar.Item>
+                    <Sidebar.Item href="https://github.com/themesberg/flowbite-react/issues" icon={HiInformationCircle}>
                       Help
-                    </SidebarItem>
-                  </SidebarItemGroup>
-                </SidebarItems>
+                    </Sidebar.Item>
+                  </Sidebar.ItemGroup>
+                </Sidebar.Items>
               </div>
             </div>
           </Sidebar>
-        </DrawerItems>
+        </Drawer.Items>
       </Drawer>
     </>
   );
 }
-`;
-
-function Component() {
-  const [isOpen, setIsOpen] = useState(true);
-
-  const handleClose = () => setIsOpen(false);
-
-  return (
-    <div className="relative z-50 -m-5 w-auto overflow-hidden">
-      <div className="flex min-h-[50vh] items-center justify-center">
-        <Button onClick={() => setIsOpen(true)}>Show drawer with backdrop</Button>
-      </div>
-      <Drawer
-        open={isOpen}
-        onClose={handleClose}
-        theme={{
-          root: {
-            base: twMerge(theme.drawer.root.base, "absolute"),
-            backdrop: twMerge(theme.drawer.root.backdrop, "absolute"),
-            position: {
-              left: {
-                on: twMerge(theme.drawer.root.position.left.on, "h-full"),
-                off: twMerge(theme.drawer.root.position.left.off, "h-full"),
-              },
-            },
-          },
-        }}
-      >
-        <DrawerHeader title="MENU" titleIcon={() => <></>} />
-        <DrawerItems>
-          <Sidebar
-            aria-label="Sidebar with multi-level dropdown example"
-            className="[&>div]:bg-transparent [&>div]:p-0"
-          >
-            <div className="flex h-full flex-col justify-between py-2">
-              <div>
-                <form className="pb-3 md:hidden">
-                  <TextInput icon={HiSearch} type="search" placeholder="Search" required size={32} />
-                </form>
-                <SidebarItems>
-                  <SidebarItemGroup>
-                    <SidebarItem href="/" icon={HiChartPie}>
-                      Dashboard
-                    </SidebarItem>
-                    <SidebarItem href="/e-commerce/products" icon={HiShoppingBag}>
-                      Products
-                    </SidebarItem>
-                    <SidebarItem href="/users/list" icon={HiUsers}>
-                      Users list
-                    </SidebarItem>
-                    <SidebarItem href="/authentication/sign-in" icon={HiLogin}>
-                      Sign in
-                    </SidebarItem>
-                    <SidebarItem href="/authentication/sign-up" icon={HiPencil}>
-                      Sign up
-                    </SidebarItem>
-                  </SidebarItemGroup>
-                  <SidebarItemGroup>
-                    <SidebarItem href="https://github.com/themesberg/flowbite-react/" icon={HiClipboard}>
-                      Docs
-                    </SidebarItem>
-                    <SidebarItem href="https://flowbite-react.com/" icon={HiCollection}>
-                      Components
-                    </SidebarItem>
-                    <SidebarItem href="https://github.com/themesberg/flowbite-react/issues" icon={HiInformationCircle}>
-                      Help
-                    </SidebarItem>
-                  </SidebarItemGroup>
-                </SidebarItems>
-              </div>
-            </div>
-          </Sidebar>
-        </DrawerItems>
-      </Drawer>
-    </div>
-  );
-}
 
 export const backdrop: CodeData = {
   type: "single",
@@ -281,12 +163,8 @@ export const backdrop: CodeData = {
       language: "tsx",
       code,
     },
-    {
-      fileName: "server",
-      language: "tsx",
-      code: codeRSC,
-    },
   ],
   githubSlug: "drawer/drawer.backdrop.tsx",
   component: <Component />,
+  iframe: 600,
 };
diff --git a/apps/web/examples/drawer/drawer.bodyScrolling.tsx b/apps/web/examples/drawer/drawer.bodyScrolling.tsx
index b387fa0ae..39020a638 100644
--- a/apps/web/examples/drawer/drawer.bodyScrolling.tsx
+++ b/apps/web/examples/drawer/drawer.bodyScrolling.tsx
@@ -1,17 +1,6 @@
 "use client";
 
-import {
-  Button,
-  Drawer,
-  DrawerHeader,
-  DrawerItems,
-  Sidebar,
-  SidebarItem,
-  SidebarItemGroup,
-  SidebarItems,
-  TextInput,
-  theme,
-} from "flowbite-react";
+import { Button, Drawer, Sidebar, TextInput } from "flowbite-react";
 import { useState } from "react";
 import {
   HiChartPie,
@@ -24,18 +13,12 @@ import {
   HiShoppingBag,
   HiUsers,
 } from "react-icons/hi";
-import { twMerge } from "tailwind-merge";
 import type { CodeData } from "~/components/code-demo";
 
 const code = `
 "use client";
 
-import {
-  Button,
-  Drawer,
-  Sidebar,
-  TextInput,
-} from "flowbite-react";
+import { Button, Drawer, Sidebar, TextInput } from "flowbite-react";
 import { useState } from "react";
 import {
   HiChartPie,
@@ -49,7 +32,7 @@ import {
   HiUsers,
 } from "react-icons/hi";
 
-function Component() {
+export function Component() {
   const [isOpen, setIsOpen] = useState(true);
 
   const handleClose = () => setIsOpen(false);
@@ -58,7 +41,7 @@ function Component() {
     <div className="h-[300px] max-h-[300px]">
       <div className="flex flex-col items-center justify-center">
         <Button onClick={() => setIsOpen(true)}>Show body scrolling</Button>
-        <div className="my-6 h-[500px] w-full bg-gray-200 p-6">Testing scroll</div>
+        <div className="h-[100rem]" />
       </div>
       <Drawer open={isOpen} onClose={handleClose}>
         <Drawer.Header title="MENU" titleIcon={() => <></>} />
@@ -111,32 +94,8 @@ function Component() {
   );
 }
 `;
-const codeRSC = `
-import {
-  Button,
-  Drawer,
-  DrawerHeader,
-  DrawerItems,
-  Sidebar,
-  SidebarItem,
-  SidebarItemGroup,
-  SidebarItems,
-  TextInput,
-} from "flowbite-react";
-import { useState } from "react";
-import {
-  HiChartPie,
-  HiClipboard,
-  HiCollection,
-  HiInformationCircle,
-  HiLogin,
-  HiPencil,
-  HiSearch,
-  HiShoppingBag,
-  HiUsers,
-} from "react-icons/hi";
 
-function Component() {
+export function Component() {
   const [isOpen, setIsOpen] = useState(true);
 
   const handleClose = () => setIsOpen(false);
@@ -145,132 +104,7 @@ function Component() {
     <div className="h-[300px] max-h-[300px]">
       <div className="flex flex-col items-center justify-center">
         <Button onClick={() => setIsOpen(true)}>Show body scrolling</Button>
-        <div className="my-6 h-[500px] w-full bg-gray-200 p-6">Testing scroll</div>
-      </div>
-      <Drawer open={isOpen} onClose={handleClose}>
-        <DrawerHeader title="MENU" titleIcon={() => <></>} />
-        <DrawerItems>
-          <Sidebar
-            aria-label="Sidebar with multi-level dropdown example"
-            className="[&>div]:bg-transparent [&>div]:p-0"
-          >
-            <div className="flex h-full flex-col justify-between py-2">
-              <div>
-                <form className="pb-3 md:hidden">
-                  <TextInput icon={HiSearch} type="search" placeholder="Search" required size={32} />
-                </form>
-                <SidebarItems>
-                  <SidebarItemGroup>
-                    <SidebarItem href="/" icon={HiChartPie}>
-                      Dashboard
-                    </SidebarItem>
-                    <SidebarItem href="/e-commerce/products" icon={HiShoppingBag}>
-                      Products
-                    </SidebarItem>
-                    <SidebarItem href="/users/list" icon={HiUsers}>
-                      Users list
-                    </SidebarItem>
-                    <SidebarItem href="/authentication/sign-in" icon={HiLogin}>
-                      Sign in
-                    </SidebarItem>
-                    <SidebarItem href="/authentication/sign-up" icon={HiPencil}>
-                      Sign up
-                    </SidebarItem>
-                  </SidebarItemGroup>
-                  <SidebarItemGroup>
-                    <SidebarItem href="https://github.com/themesberg/flowbite-react/" icon={HiClipboard}>
-                      Docs
-                    </SidebarItem>
-                    <SidebarItem href="https://flowbite-react.com/" icon={HiCollection}>
-                      Components
-                    </SidebarItem>
-                    <SidebarItem href="https://github.com/themesberg/flowbite-react/issues" icon={HiInformationCircle}>
-                      Help
-                    </SidebarItem>
-                  </SidebarItemGroup>
-                </SidebarItems>
-              </div>
-            </div>
-          </Sidebar>
-        </DrawerItems>
-      </Drawer>
-    </div>
-  );
-}
-`;
-
-function Component() {
-  const [isOpen, setIsOpen] = useState(true);
-
-  const handleClose = () => setIsOpen(false);
-
-  return (
-    <div className="relative z-50 -m-5 h-[600px] w-auto overflow-y-auto">
-      <div className="my-5 flex justify-center">
-        <Button onClick={() => setIsOpen(true)}>Show body scrolling</Button>
       </div>
-      <Drawer
-        open={isOpen}
-        onClose={handleClose}
-        theme={{
-          root: {
-            base: twMerge(theme.drawer.root.base, "absolute"),
-            backdrop: twMerge(theme.drawer.root.backdrop, "absolute"),
-            position: {
-              left: {
-                on: twMerge(theme.drawer.root.position.left.on, "h-full"),
-                off: twMerge(theme.drawer.root.position.left.off, "h-full"),
-              },
-            },
-          },
-        }}
-      >
-        <DrawerHeader title="MENU" titleIcon={() => <></>} />
-        <DrawerItems>
-          <Sidebar
-            aria-label="Sidebar with multi-level dropdown example"
-            className="[&>div]:bg-transparent [&>div]:p-0"
-          >
-            <div className="flex h-full flex-col justify-between py-2">
-              <div>
-                <form className="pb-3 md:hidden">
-                  <TextInput icon={HiSearch} type="search" placeholder="Search" required size={32} />
-                </form>
-                <SidebarItems>
-                  <SidebarItemGroup>
-                    <SidebarItem href="/" icon={HiChartPie}>
-                      Dashboard
-                    </SidebarItem>
-                    <SidebarItem href="/e-commerce/products" icon={HiShoppingBag}>
-                      Products
-                    </SidebarItem>
-                    <SidebarItem href="/users/list" icon={HiUsers}>
-                      Users list
-                    </SidebarItem>
-                    <SidebarItem href="/authentication/sign-in" icon={HiLogin}>
-                      Sign in
-                    </SidebarItem>
-                    <SidebarItem href="/authentication/sign-up" icon={HiPencil}>
-                      Sign up
-                    </SidebarItem>
-                  </SidebarItemGroup>
-                  <SidebarItemGroup>
-                    <SidebarItem href="https://github.com/themesberg/flowbite-react/" icon={HiClipboard}>
-                      Docs
-                    </SidebarItem>
-                    <SidebarItem href="https://flowbite-react.com/" icon={HiCollection}>
-                      Components
-                    </SidebarItem>
-                    <SidebarItem href="https://github.com/themesberg/flowbite-react/issues" icon={HiInformationCircle}>
-                      Help
-                    </SidebarItem>
-                  </SidebarItemGroup>
-                </SidebarItems>
-              </div>
-            </div>
-          </Sidebar>
-        </DrawerItems>
-      </Drawer>
       <div className="mx-auto max-w-lg">
         <div role="status" className="my-7 animate-pulse">
           <div className="mb-4 h-2.5 w-48 rounded-full bg-gray-300 dark:bg-gray-700"></div>
@@ -331,6 +165,53 @@ function Component() {
           <span className="sr-only">Loading...</span>
         </div>
       </div>
+      <Drawer open={isOpen} onClose={handleClose}>
+        <Drawer.Header title="MENU" titleIcon={() => <></>} />
+        <Drawer.Items>
+          <Sidebar
+            aria-label="Sidebar with multi-level dropdown example"
+            className="[&>div]:bg-transparent [&>div]:p-0"
+          >
+            <div className="flex h-full flex-col justify-between py-2">
+              <div>
+                <form className="pb-3 md:hidden">
+                  <TextInput icon={HiSearch} type="search" placeholder="Search" required size={32} />
+                </form>
+                <Sidebar.Items>
+                  <Sidebar.ItemGroup>
+                    <Sidebar.Item href="/" icon={HiChartPie}>
+                      Dashboard
+                    </Sidebar.Item>
+                    <Sidebar.Item href="/e-commerce/products" icon={HiShoppingBag}>
+                      Products
+                    </Sidebar.Item>
+                    <Sidebar.Item href="/users/list" icon={HiUsers}>
+                      Users list
+                    </Sidebar.Item>
+                    <Sidebar.Item href="/authentication/sign-in" icon={HiLogin}>
+                      Sign in
+                    </Sidebar.Item>
+                    <Sidebar.Item href="/authentication/sign-up" icon={HiPencil}>
+                      Sign up
+                    </Sidebar.Item>
+                  </Sidebar.ItemGroup>
+                  <Sidebar.ItemGroup>
+                    <Sidebar.Item href="https://github.com/themesberg/flowbite-react/" icon={HiClipboard}>
+                      Docs
+                    </Sidebar.Item>
+                    <Sidebar.Item href="https://flowbite-react.com/" icon={HiCollection}>
+                      Components
+                    </Sidebar.Item>
+                    <Sidebar.Item href="https://github.com/themesberg/flowbite-react/issues" icon={HiInformationCircle}>
+                      Help
+                    </Sidebar.Item>
+                  </Sidebar.ItemGroup>
+                </Sidebar.Items>
+              </div>
+            </div>
+          </Sidebar>
+        </Drawer.Items>
+      </Drawer>
     </div>
   );
 }
@@ -343,12 +224,8 @@ export const bodyScrolling: CodeData = {
       language: "tsx",
       code,
     },
-    {
-      fileName: "server",
-      language: "tsx",
-      code: codeRSC,
-    },
   ],
   githubSlug: "drawer/drawer.bodyScrolling.tsx",
   component: <Component />,
+  iframe: 600,
 };
diff --git a/apps/web/examples/drawer/drawer.bottom.tsx b/apps/web/examples/drawer/drawer.bottom.tsx
index 9a4af82a0..ac1c3848b 100644
--- a/apps/web/examples/drawer/drawer.bottom.tsx
+++ b/apps/web/examples/drawer/drawer.bottom.tsx
@@ -1,8 +1,7 @@
 "use client";
 
-import { Button, Drawer, DrawerHeader, DrawerItems, theme } from "flowbite-react";
+import { Button, Drawer } from "flowbite-react";
 import { useState } from "react";
-import { twMerge } from "tailwind-merge";
 import type { CodeData } from "~/components/code-demo";
 
 const code = `
@@ -11,7 +10,7 @@ const code = `
 import { Button, Drawer } from "flowbite-react";
 import { useState } from "react";
 
-function Component() {
+export function Component() {
   const [isOpen, setIsOpen] = useState(true);
 
   const handleClose = () => setIsOpen(false);
@@ -67,11 +66,8 @@ function Component() {
   );
 }
 `;
-const codeRSC = `
-import { Button, Drawer, DrawerHeader, DrawerItems } from "flowbite-react";
-import { useState } from "react";
 
-function Component() {
+export function Component() {
   const [isOpen, setIsOpen] = useState(true);
 
   const handleClose = () => setIsOpen(false);
@@ -82,8 +78,8 @@ function Component() {
         <Button onClick={() => setIsOpen(true)}>Show bottom drawer</Button>
       </div>
       <Drawer open={isOpen} onClose={handleClose} position="bottom">
-        <DrawerHeader title="Drawer" />
-        <DrawerItems>
+        <Drawer.Header title="Drawer" />
+        <Drawer.Items>
           <p className="mb-6 text-sm text-gray-500 dark:text-gray-400">
             Supercharge your hiring by taking advantage of our&nbsp;
             <a href="#" className="text-cyan-600 underline hover:no-underline dark:text-cyan-500">
@@ -121,78 +117,11 @@ function Component() {
               </svg>
             </a>
           </div>
-        </DrawerItems>
+        </Drawer.Items>
       </Drawer>
     </>
   );
 }
-`;
-
-function Component() {
-  const [isOpen, setIsOpen] = useState(true);
-
-  const handleClose = () => setIsOpen(false);
-
-  return (
-    <div className="relative z-50 -m-5 w-auto overflow-hidden">
-      <div className="flex min-h-[50vh] items-center justify-center">
-        <Button onClick={() => setIsOpen(true)}>Show bottom drawer</Button>
-      </div>
-      <Drawer
-        open={isOpen}
-        onClose={handleClose}
-        position="bottom"
-        theme={{
-          root: {
-            base: twMerge(theme.drawer.root.base, "absolute"),
-            backdrop: twMerge(theme.drawer.root.backdrop, "absolute"),
-          },
-        }}
-      >
-        <DrawerHeader title="Drawer" />
-        <DrawerItems>
-          <p className="mb-6 text-sm text-gray-500 dark:text-gray-400">
-            Supercharge your hiring by taking advantage of our&nbsp;
-            <a href="#" className="text-cyan-600 underline hover:no-underline dark:text-cyan-500">
-              limited-time sale
-            </a>
-            &nbsp;for Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design
-            job board.
-          </p>
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <a
-              href="#"
-              className="rounded-lg border border-gray-200 bg-white px-4 py-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-cyan-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
-            >
-              Learn more
-            </a>
-            <a
-              href="#"
-              className="inline-flex items-center rounded-lg bg-cyan-700 px-4 py-2 text-center text-sm font-medium text-white hover:bg-cyan-800 focus:outline-none focus:ring-4 focus:ring-cyan-300 dark:bg-cyan-600 dark:hover:bg-cyan-700 dark:focus:ring-cyan-800"
-            >
-              Get access&nbsp;
-              <svg
-                className="ms-2 h-3.5 w-3.5 rtl:rotate-180"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 14 10"
-              >
-                <path
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M1 5h12m0 0L9 1m4 4L9 9"
-                />
-              </svg>
-            </a>
-          </div>
-        </DrawerItems>
-      </Drawer>
-    </div>
-  );
-}
 
 export const bottom: CodeData = {
   type: "single",
@@ -202,12 +131,8 @@ export const bottom: CodeData = {
       language: "tsx",
       code,
     },
-    {
-      fileName: "server",
-      language: "tsx",
-      code: codeRSC,
-    },
   ],
   githubSlug: "drawer/drawer.bottom.tsx",
   component: <Component />,
+  iframe: 600,
 };
diff --git a/apps/web/examples/drawer/drawer.contactForm.tsx b/apps/web/examples/drawer/drawer.contactForm.tsx
index c243ab416..6f3420c45 100644
--- a/apps/web/examples/drawer/drawer.contactForm.tsx
+++ b/apps/web/examples/drawer/drawer.contactForm.tsx
@@ -1,9 +1,8 @@
 "use client";
 
-import { Button, Drawer, DrawerHeader, DrawerItems, Label, Textarea, TextInput, theme } from "flowbite-react";
+import { Button, Drawer, Label, Textarea, TextInput } from "flowbite-react";
 import { useState } from "react";
 import { HiEnvelope } from "react-icons/hi2";
-import { twMerge } from "tailwind-merge";
 import type { CodeData } from "~/components/code-demo";
 
 const code = `
@@ -13,7 +12,7 @@ import { Button, Drawer, Label, Textarea, TextInput } from "flowbite-react";
 import { useState } from "react";
 import { HiEnvelope } from "react-icons/hi2";
 
-function Component() {
+export function Component() {
   const [isOpen, setIsOpen] = useState(true);
 
   const handleClose = () => setIsOpen(false);
@@ -67,20 +66,8 @@ function Component() {
   );
 }
 `;
-const codeRSC = `
-import { 
-  Button, 
-  Drawer, 
-  DrawerHeader, 
-  DrawerItems, 
-  Label, 
-  Textarea, 
-  TextInput 
-} from "flowbite-react";
-import { useState } from "react";
-import { HiEnvelope } from "react-icons/hi2";
 
-function Component() {
+export function Component() {
   const [isOpen, setIsOpen] = useState(true);
 
   const handleClose = () => setIsOpen(false);
@@ -91,8 +78,8 @@ function Component() {
         <Button onClick={() => setIsOpen(true)}>Show contact form</Button>
       </div>
       <Drawer open={isOpen} onClose={handleClose}>
-        <DrawerHeader title="CONTACT US" titleIcon={HiEnvelope} />
-        <DrawerItems>
+        <Drawer.Header title="CONTACT US" titleIcon={HiEnvelope} />
+        <Drawer.Items>
           <form action="#">
             <div className="mb-6 mt-3">
               <Label htmlFor="email" className="mb-2 block">
@@ -128,81 +115,11 @@ function Component() {
               </a>
             </p>
           </form>
-        </DrawerItems>
+        </Drawer.Items>
       </Drawer>
     </>
   );
 }
-`;
-
-function Component() {
-  const [isOpen, setIsOpen] = useState(true);
-
-  const handleClose = () => setIsOpen(false);
-
-  return (
-    <div className="relative z-50 -m-5 w-auto overflow-hidden">
-      <div className="flex min-h-[50vh] items-center justify-center">
-        <Button onClick={() => setIsOpen(true)}>Show contact form</Button>
-      </div>
-      <Drawer
-        open={isOpen}
-        onClose={handleClose}
-        theme={{
-          root: {
-            base: twMerge(theme.drawer.root.base, "absolute"),
-            backdrop: twMerge(theme.drawer.root.backdrop, "absolute"),
-            position: {
-              left: {
-                on: twMerge(theme.drawer.root.position.left.on, "h-full"),
-                off: twMerge(theme.drawer.root.position.left.off, "h-full"),
-              },
-            },
-          },
-        }}
-      >
-        <DrawerHeader title="CONTACT US" titleIcon={HiEnvelope} />
-        <DrawerItems>
-          <form action="#">
-            <div className="mb-6 mt-3">
-              <Label htmlFor="email" className="mb-2 block">
-                Your email
-              </Label>
-              <TextInput id="email" name="email" placeholder="name@company.com" type="email" />
-            </div>
-            <div className="mb-6">
-              <Label htmlFor="subject" className="mb-2 block">
-                Subject
-              </Label>
-              <TextInput id="subject" name="subject" placeholder="Let us know how we can help you" />
-            </div>
-            <div className="mb-6">
-              <Label htmlFor="message" className="mb-2 block">
-                Your message
-              </Label>
-              <Textarea id="message" name="message" placeholder="Your message..." rows={4} />
-            </div>
-            <div className="mb-6">
-              <Button type="submit" className="w-full">
-                Send message
-              </Button>
-            </div>
-            <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
-              <a href="mailto:info@company.com" className="hover:underline">
-                info@company.com
-              </a>
-            </p>
-            <p className="text-sm text-gray-500 dark:text-gray-400">
-              <a href="tel:2124567890" className="hover:underline">
-                212-456-7890
-              </a>
-            </p>
-          </form>
-        </DrawerItems>
-      </Drawer>
-    </div>
-  );
-}
 
 export const contactForm: CodeData = {
   type: "single",
@@ -212,12 +129,8 @@ export const contactForm: CodeData = {
       language: "tsx",
       code,
     },
-    {
-      fileName: "server",
-      language: "tsx",
-      code: codeRSC,
-    },
   ],
   githubSlug: "drawer/drawer.contactForm.tsx",
   component: <Component />,
+  iframe: 600,
 };
diff --git a/apps/web/examples/drawer/drawer.formElements.tsx b/apps/web/examples/drawer/drawer.formElements.tsx
index bef9e6be6..4acc5d89d 100644
--- a/apps/web/examples/drawer/drawer.formElements.tsx
+++ b/apps/web/examples/drawer/drawer.formElements.tsx
@@ -1,18 +1,6 @@
 "use client";
 
-import {
-  Avatar,
-  AvatarGroup,
-  Button,
-  Datepicker,
-  Drawer,
-  DrawerHeader,
-  DrawerItems,
-  Label,
-  Textarea,
-  TextInput,
-  theme,
-} from "flowbite-react";
+import { Avatar, Button, Datepicker, Drawer, Label, Textarea, TextInput, theme } from "flowbite-react";
 import { useState } from "react";
 import { HiCalendar, HiUserAdd } from "react-icons/hi";
 import { twMerge } from "tailwind-merge";
@@ -21,21 +9,12 @@ import type { CodeData } from "~/components/code-demo";
 const code = `
 "use client";
 
-import {
-  Avatar,
-  Button,
-  Datepicker,
-  Drawer,
-  Label,
-  Textarea,
-  TextInput,
-  theme,
-} from "flowbite-react";
+import { Avatar, Button, Datepicker, Drawer, Label, Textarea, TextInput, theme } from "flowbite-react";
 import { useState } from "react";
 import { HiCalendar, HiUserAdd } from "react-icons/hi";
 import { twMerge } from "tailwind-merge";
 
-function Component() {
+export function Component() {
   const [isOpen, setIsOpen] = useState(true);
 
   const handleClose = () => setIsOpen(false);
@@ -90,7 +69,7 @@ function Component() {
               <Avatar alt="" img="/images/people/profile-picture-2.jpg" rounded size="sm" stacked />
               <Avatar alt="" img="/images/people/profile-picture-3.jpg" rounded size="sm" stacked />
               <Avatar alt="" img="/images/people/profile-picture-4.jpg" rounded size="sm" stacked />
-            </AvatarGroup>
+            </Avatar.Group>
             <Button className="w-full">
               <HiCalendar className="mr-2" />
               Create event
@@ -102,25 +81,8 @@ function Component() {
   );
 }
 `;
-const codeRSC = `
-import {
-  Avatar,
-  AvatarGroup,
-  Button,
-  Datepicker,
-  Drawer,
-  DrawerHeader,
-  DrawerItems,
-  Label,
-  Textarea,
-  TextInput,
-  theme,
-} from "flowbite-react";
-import { useState } from "react";
-import { HiCalendar, HiUserAdd } from "react-icons/hi";
-import { twMerge } from "tailwind-merge";
 
-function Component() {
+export function Component() {
   const [isOpen, setIsOpen] = useState(true);
 
   const handleClose = () => setIsOpen(false);
@@ -131,8 +93,8 @@ function Component() {
         <Button onClick={() => setIsOpen(true)}>Show drawer</Button>
       </div>
       <Drawer open={isOpen} onClose={handleClose}>
-        <DrawerHeader title="NEW EVENT" titleIcon={HiCalendar} />
-        <DrawerItems>
+        <Drawer.Header title="NEW EVENT" titleIcon={HiCalendar} />
+        <Drawer.Items>
           <form action="#">
             <div className="mb-6 mt-3">
               <Label htmlFor="title" className="mb-2 block">
@@ -170,105 +132,22 @@ function Component() {
                 }}
               />
             </div>
-            <AvatarGroup className="mb-6">
+            <Avatar.Group className="mb-6">
               <Avatar alt="" img="/images/people/profile-picture-5.jpg" rounded size="sm" stacked />
               <Avatar alt="" img="/images/people/profile-picture-2.jpg" rounded size="sm" stacked />
               <Avatar alt="" img="/images/people/profile-picture-3.jpg" rounded size="sm" stacked />
               <Avatar alt="" img="/images/people/profile-picture-4.jpg" rounded size="sm" stacked />
-            </AvatarGroup>
+            </Avatar.Group>
             <Button className="w-full">
               <HiCalendar className="mr-2" />
               Create event
             </Button>
           </form>
-        </DrawerItems>
+        </Drawer.Items>
       </Drawer>
     </>
   );
 }
-`;
-
-function Component() {
-  const [isOpen, setIsOpen] = useState(true);
-
-  const handleClose = () => setIsOpen(false);
-
-  return (
-    <div className="relative z-50 -m-5 w-auto overflow-hidden">
-      <div className="flex min-h-[50vh] items-center justify-center">
-        <Button onClick={() => setIsOpen(true)}>Show drawer</Button>
-      </div>
-      <Drawer
-        open={isOpen}
-        onClose={handleClose}
-        theme={{
-          root: {
-            base: twMerge(theme.drawer.root.base, "absolute"),
-            backdrop: twMerge(theme.drawer.root.backdrop, "absolute"),
-            position: {
-              left: {
-                on: twMerge(theme.drawer.root.position.left.on, "h-full"),
-                off: twMerge(theme.drawer.root.position.left.off, "h-full"),
-              },
-            },
-          },
-        }}
-      >
-        <DrawerHeader title="NEW EVENT" titleIcon={HiCalendar} />
-        <DrawerItems>
-          <form action="#">
-            <div className="mb-6 mt-3">
-              <Label htmlFor="title" className="mb-2 block">
-                Title
-              </Label>
-              <TextInput id="title" name="title" placeholder="Apple Keynote" />
-            </div>
-            <div className="mb-6">
-              <Label htmlFor="description" className="mb-2 block">
-                Description
-              </Label>
-              <Textarea id="description" name="description" placeholder="Write event description..." rows={4} />
-            </div>
-            <div className="mb-6">
-              <Datepicker />
-            </div>
-            <div className="mb-6">
-              <TextInput
-                id="guests"
-                name="guests"
-                placeholder="Add guest email"
-                type="search"
-                rightIcon={() => (
-                  <Button size="sm" className="[&>span]:items-center [&>span]:px-2 [&>span]:py-0">
-                    <HiUserAdd className="mr-2" />
-                    Add
-                  </Button>
-                )}
-                theme={{
-                  field: {
-                    rightIcon: {
-                      base: twMerge(theme.textInput.field.rightIcon.base, "pointer-events-auto"),
-                    },
-                  },
-                }}
-              />
-            </div>
-            <AvatarGroup className="mb-6">
-              <Avatar alt="" img="/images/people/profile-picture-5.jpg" rounded size="sm" stacked />
-              <Avatar alt="" img="/images/people/profile-picture-2.jpg" rounded size="sm" stacked />
-              <Avatar alt="" img="/images/people/profile-picture-3.jpg" rounded size="sm" stacked />
-              <Avatar alt="" img="/images/people/profile-picture-4.jpg" rounded size="sm" stacked />
-            </AvatarGroup>
-            <Button className="w-full">
-              <HiCalendar className="mr-2" />
-              Create event
-            </Button>
-          </form>
-        </DrawerItems>
-      </Drawer>
-    </div>
-  );
-}
 
 export const formElements: CodeData = {
   type: "single",
@@ -278,12 +157,8 @@ export const formElements: CodeData = {
       language: "tsx",
       code,
     },
-    {
-      fileName: "server",
-      language: "tsx",
-      code: codeRSC,
-    },
   ],
   githubSlug: "drawer/drawer.formElements.tsx",
   component: <Component />,
+  iframe: 600,
 };
diff --git a/apps/web/examples/drawer/drawer.left.tsx b/apps/web/examples/drawer/drawer.left.tsx
index ae9d48818..7a14928dc 100644
--- a/apps/web/examples/drawer/drawer.left.tsx
+++ b/apps/web/examples/drawer/drawer.left.tsx
@@ -1,8 +1,7 @@
 "use client";
 
-import { Button, Drawer, DrawerHeader, DrawerItems, theme } from "flowbite-react";
+import { Button, Drawer } from "flowbite-react";
 import { useState } from "react";
-import { twMerge } from "tailwind-merge";
 import type { CodeData } from "~/components/code-demo";
 
 const code = `
@@ -11,7 +10,7 @@ const code = `
 import { Button, Drawer } from "flowbite-react";
 import { useState } from "react";
 
-function Component() {
+export function Component() {
   const [isOpen, setIsOpen] = useState(true);
 
   const handleClose = () => setIsOpen(false);
@@ -67,11 +66,8 @@ function Component() {
   );
 }
 `;
-const codeRSC = `
-import { Button, Drawer, DrawerHeader, DrawerItems } from "flowbite-react";
-import { useState } from "react";
 
-function Component() {
+export function Component() {
   const [isOpen, setIsOpen] = useState(true);
 
   const handleClose = () => setIsOpen(false);
@@ -82,8 +78,8 @@ function Component() {
         <Button onClick={() => setIsOpen(true)}>Show left drawer</Button>
       </div>
       <Drawer open={isOpen} onClose={handleClose} position="left">
-        <DrawerHeader title="Drawer" />
-        <DrawerItems>
+        <Drawer.Header title="Drawer" />
+        <Drawer.Items>
           <p className="mb-6 text-sm text-gray-500 dark:text-gray-400">
             Supercharge your hiring by taking advantage of our&nbsp;
             <a href="#" className="text-cyan-600 underline hover:no-underline dark:text-cyan-500">
@@ -121,84 +117,11 @@ function Component() {
               </svg>
             </a>
           </div>
-        </DrawerItems>
+        </Drawer.Items>
       </Drawer>
     </>
   );
 }
-`;
-
-function Component() {
-  const [isOpen, setIsOpen] = useState(true);
-
-  const handleClose = () => setIsOpen(false);
-
-  return (
-    <div className="relative z-50 -m-5 w-auto overflow-hidden">
-      <div className="flex min-h-[50vh] items-center justify-center">
-        <Button onClick={() => setIsOpen(true)}>Show left drawer</Button>
-      </div>
-      <Drawer
-        open={isOpen}
-        onClose={handleClose}
-        position="left"
-        theme={{
-          root: {
-            base: twMerge(theme.drawer.root.base, "absolute"),
-            backdrop: twMerge(theme.drawer.root.backdrop, "absolute"),
-            position: {
-              left: {
-                on: twMerge(theme.drawer.root.position.left.on, "h-full"),
-                off: twMerge(theme.drawer.root.position.left.off, "h-full"),
-              },
-            },
-          },
-        }}
-      >
-        <DrawerHeader title="Drawer" />
-        <DrawerItems>
-          <p className="mb-6 text-sm text-gray-500 dark:text-gray-400">
-            Supercharge your hiring by taking advantage of our&nbsp;
-            <a href="#" className="text-cyan-600 underline hover:no-underline dark:text-cyan-500">
-              limited-time sale
-            </a>
-            &nbsp;for Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design
-            job board.
-          </p>
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <a
-              href="#"
-              className="rounded-lg border border-gray-200 bg-white px-4 py-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-cyan-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
-            >
-              Learn more
-            </a>
-            <a
-              href="#"
-              className="inline-flex items-center rounded-lg bg-cyan-700 px-4 py-2 text-center text-sm font-medium text-white hover:bg-cyan-800 focus:outline-none focus:ring-4 focus:ring-cyan-300 dark:bg-cyan-600 dark:hover:bg-cyan-700 dark:focus:ring-cyan-800"
-            >
-              Get access&nbsp;
-              <svg
-                className="ms-2 h-3.5 w-3.5 rtl:rotate-180"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 14 10"
-              >
-                <path
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M1 5h12m0 0L9 1m4 4L9 9"
-                />
-              </svg>
-            </a>
-          </div>
-        </DrawerItems>
-      </Drawer>
-    </div>
-  );
-}
 
 export const left: CodeData = {
   type: "single",
@@ -208,12 +131,8 @@ export const left: CodeData = {
       language: "tsx",
       code,
     },
-    {
-      fileName: "server",
-      language: "tsx",
-      code: codeRSC,
-    },
   ],
   githubSlug: "drawer/drawer.left.tsx",
   component: <Component />,
+  iframe: 600,
 };
diff --git a/apps/web/examples/drawer/drawer.navigation.tsx b/apps/web/examples/drawer/drawer.navigation.tsx
index 2f8a4c025..d5b3faf95 100644
--- a/apps/web/examples/drawer/drawer.navigation.tsx
+++ b/apps/web/examples/drawer/drawer.navigation.tsx
@@ -1,17 +1,6 @@
 "use client";
 
-import {
-  Button,
-  Drawer,
-  DrawerHeader,
-  DrawerItems,
-  Sidebar,
-  SidebarItem,
-  SidebarItemGroup,
-  SidebarItems,
-  TextInput,
-  theme,
-} from "flowbite-react";
+import { Button, Drawer, Sidebar, TextInput } from "flowbite-react";
 import { useState } from "react";
 import {
   HiChartPie,
@@ -24,18 +13,12 @@ import {
   HiShoppingBag,
   HiUsers,
 } from "react-icons/hi";
-import { twMerge } from "tailwind-merge";
 import type { CodeData } from "~/components/code-demo";
 
 const code = `
 "use client";
 
-import {
-  Button,
-  Drawer,
-  Sidebar,
-  TextInput,
-} from "flowbite-react";
+import { Button, Drawer, Sidebar, TextInput } from "flowbite-react";
 import { useState } from "react";
 import {
   HiChartPie,
@@ -49,7 +32,7 @@ import {
   HiUsers,
 } from "react-icons/hi";
 
-function Component() {
+export function Component() {
   const [isOpen, setIsOpen] = useState(true);
 
   const handleClose = () => setIsOpen(false);
@@ -110,32 +93,8 @@ function Component() {
   );
 }
 `;
-const codeRSC = `
-import {
-  Button,
-  Drawer,
-  DrawerHeader,
-  DrawerItems,
-  Sidebar,
-  SidebarItem,
-  SidebarItemGroup,
-  SidebarItems,
-  TextInput,
-} from "flowbite-react";
-import { useState } from "react";
-import {
-  HiChartPie,
-  HiClipboard,
-  HiCollection,
-  HiInformationCircle,
-  HiLogin,
-  HiPencil,
-  HiSearch,
-  HiShoppingBag,
-  HiUsers,
-} from "react-icons/hi";
 
-function Component() {
+export function Component() {
   const [isOpen, setIsOpen] = useState(true);
 
   const handleClose = () => setIsOpen(false);
@@ -146,8 +105,8 @@ function Component() {
         <Button onClick={() => setIsOpen(true)}>Show navigation</Button>
       </div>
       <Drawer open={isOpen} onClose={handleClose}>
-        <DrawerHeader title="MENU" titleIcon={() => <></>} />
-        <DrawerItems>
+        <Drawer.Header title="MENU" titleIcon={() => <></>} />
+        <Drawer.Items>
           <Sidebar
             aria-label="Sidebar with multi-level dropdown example"
             className="[&>div]:bg-transparent [&>div]:p-0"
@@ -157,121 +116,44 @@ function Component() {
                 <form className="pb-3 md:hidden">
                   <TextInput icon={HiSearch} type="search" placeholder="Search" required size={32} />
                 </form>
-                <SidebarItems>
-                  <SidebarItemGroup>
-                    <SidebarItem href="/" icon={HiChartPie}>
+                <Sidebar.Items>
+                  <Sidebar.ItemGroup>
+                    <Sidebar.Item href="/" icon={HiChartPie}>
                       Dashboard
-                    </SidebarItem>
-                    <SidebarItem href="/e-commerce/products" icon={HiShoppingBag}>
+                    </Sidebar.Item>
+                    <Sidebar.Item href="/e-commerce/products" icon={HiShoppingBag}>
                       Products
-                    </SidebarItem>
-                    <SidebarItem href="/users/list" icon={HiUsers}>
+                    </Sidebar.Item>
+                    <Sidebar.Item href="/users/list" icon={HiUsers}>
                       Users list
-                    </SidebarItem>
-                    <SidebarItem href="/authentication/sign-in" icon={HiLogin}>
+                    </Sidebar.Item>
+                    <Sidebar.Item href="/authentication/sign-in" icon={HiLogin}>
                       Sign in
-                    </SidebarItem>
-                    <SidebarItem href="/authentication/sign-up" icon={HiPencil}>
+                    </Sidebar.Item>
+                    <Sidebar.Item href="/authentication/sign-up" icon={HiPencil}>
                       Sign up
-                    </SidebarItem>
-                  </SidebarItemGroup>
-                  <SidebarItemGroup>
-                    <SidebarItem href="https://github.com/themesberg/flowbite-react/" icon={HiClipboard}>
+                    </Sidebar.Item>
+                  </Sidebar.ItemGroup>
+                  <Sidebar.ItemGroup>
+                    <Sidebar.Item href="https://github.com/themesberg/flowbite-react/" icon={HiClipboard}>
                       Docs
-                    </SidebarItem>
-                    <SidebarItem href="https://flowbite-react.com/" icon={HiCollection}>
+                    </Sidebar.Item>
+                    <Sidebar.Item href="https://flowbite-react.com/" icon={HiCollection}>
                       Components
-                    </SidebarItem>
-                    <SidebarItem href="https://github.com/themesberg/flowbite-react/issues" icon={HiInformationCircle}>
+                    </Sidebar.Item>
+                    <Sidebar.Item href="https://github.com/themesberg/flowbite-react/issues" icon={HiInformationCircle}>
                       Help
-                    </SidebarItem>
-                  </SidebarItemGroup>
-                </SidebarItems>
+                    </Sidebar.Item>
+                  </Sidebar.ItemGroup>
+                </Sidebar.Items>
               </div>
             </div>
           </Sidebar>
-        </DrawerItems>
+        </Drawer.Items>
       </Drawer>
     </>
   );
 }
-`;
-
-function Component() {
-  const [isOpen, setIsOpen] = useState(true);
-
-  const handleClose = () => setIsOpen(false);
-
-  return (
-    <div className="relative z-50 -m-5 w-auto overflow-hidden">
-      <div className="flex min-h-[50vh] items-center justify-center">
-        <Button onClick={() => setIsOpen(true)}>Show navigation</Button>
-      </div>
-      <Drawer
-        open={isOpen}
-        onClose={handleClose}
-        theme={{
-          root: {
-            base: twMerge(theme.drawer.root.base, "absolute"),
-            backdrop: twMerge(theme.drawer.root.backdrop, "absolute"),
-            position: {
-              left: {
-                on: twMerge(theme.drawer.root.position.left.on, "h-full"),
-                off: twMerge(theme.drawer.root.position.left.off, "h-full"),
-              },
-            },
-          },
-        }}
-      >
-        <DrawerHeader title="MENU" titleIcon={() => <></>} />
-        <DrawerItems>
-          <Sidebar
-            aria-label="Sidebar with multi-level dropdown example"
-            className="[&>div]:bg-transparent [&>div]:p-0"
-          >
-            <div className="flex h-full flex-col justify-between py-2">
-              <div>
-                <form className="pb-3 md:hidden">
-                  <TextInput icon={HiSearch} type="search" placeholder="Search" required size={32} />
-                </form>
-                <SidebarItems>
-                  <SidebarItemGroup>
-                    <SidebarItem href="/" icon={HiChartPie}>
-                      Dashboard
-                    </SidebarItem>
-                    <SidebarItem href="/e-commerce/products" icon={HiShoppingBag}>
-                      Products
-                    </SidebarItem>
-                    <SidebarItem href="/users/list" icon={HiUsers}>
-                      Users list
-                    </SidebarItem>
-                    <SidebarItem href="/authentication/sign-in" icon={HiLogin}>
-                      Sign in
-                    </SidebarItem>
-                    <SidebarItem href="/authentication/sign-up" icon={HiPencil}>
-                      Sign up
-                    </SidebarItem>
-                  </SidebarItemGroup>
-                  <SidebarItemGroup>
-                    <SidebarItem href="https://github.com/themesberg/flowbite-react/" icon={HiClipboard}>
-                      Docs
-                    </SidebarItem>
-                    <SidebarItem href="https://flowbite-react.com/" icon={HiCollection}>
-                      Components
-                    </SidebarItem>
-                    <SidebarItem href="https://github.com/themesberg/flowbite-react/issues" icon={HiInformationCircle}>
-                      Help
-                    </SidebarItem>
-                  </SidebarItemGroup>
-                </SidebarItems>
-              </div>
-            </div>
-          </Sidebar>
-        </DrawerItems>
-      </Drawer>
-    </div>
-  );
-}
 
 export const navigation: CodeData = {
   type: "single",
@@ -281,12 +163,8 @@ export const navigation: CodeData = {
       language: "tsx",
       code,
     },
-    {
-      fileName: "server",
-      language: "tsx",
-      code: codeRSC,
-    },
   ],
   githubSlug: "drawer/drawer.navigation.tsx",
   component: <Component />,
+  iframe: 600,
 };
diff --git a/apps/web/examples/drawer/drawer.noBackdrop.tsx b/apps/web/examples/drawer/drawer.noBackdrop.tsx
index 68656f0a4..a3024aebd 100644
--- a/apps/web/examples/drawer/drawer.noBackdrop.tsx
+++ b/apps/web/examples/drawer/drawer.noBackdrop.tsx
@@ -1,17 +1,6 @@
 "use client";
 
-import {
-  Button,
-  Drawer,
-  DrawerHeader,
-  DrawerItems,
-  Sidebar,
-  SidebarItem,
-  SidebarItemGroup,
-  SidebarItems,
-  TextInput,
-  theme,
-} from "flowbite-react";
+import { Button, Drawer, Sidebar, TextInput } from "flowbite-react";
 import { useState } from "react";
 import {
   HiChartPie,
@@ -24,18 +13,12 @@ import {
   HiShoppingBag,
   HiUsers,
 } from "react-icons/hi";
-import { twMerge } from "tailwind-merge";
 import type { CodeData } from "~/components/code-demo";
 
 const code = `
 "use client";
 
-import {
-  Button,
-  Drawer,
-  Sidebar,
-  TextInput,
-} from "flowbite-react";
+import { Button, Drawer, Sidebar, TextInput } from "flowbite-react";
 import { useState } from "react";
 import {
   HiChartPie,
@@ -49,7 +32,7 @@ import {
   HiUsers,
 } from "react-icons/hi";
 
-function Component() {
+export function Component() {
   const [isOpen, setIsOpen] = useState(true);
 
   const handleClose = () => setIsOpen(false);
@@ -110,32 +93,8 @@ function Component() {
   );
 }
 `;
-const codeRSC = `
-import {
-  Button,
-  Drawer,
-  DrawerHeader,
-  DrawerItems,
-  Sidebar,
-  SidebarItem,
-  SidebarItemGroup,
-  SidebarItems,
-  TextInput,
-} from "flowbite-react";
-import { useState } from "react";
-import {
-  HiChartPie,
-  HiClipboard,
-  HiCollection,
-  HiInformationCircle,
-  HiLogin,
-  HiPencil,
-  HiSearch,
-  HiShoppingBag,
-  HiUsers,
-} from "react-icons/hi";
 
-function Component() {
+export function Component() {
   const [isOpen, setIsOpen] = useState(true);
 
   const handleClose = () => setIsOpen(false);
@@ -146,8 +105,8 @@ function Component() {
         <Button onClick={() => setIsOpen(true)}>Show navigation</Button>
       </div>
       <Drawer backdrop={false} open={isOpen} onClose={handleClose}>
-        <DrawerHeader title="MENU" titleIcon={() => <></>} />
-        <DrawerItems>
+        <Drawer.Header title="MENU" titleIcon={() => <></>} />
+        <Drawer.Items>
           <Sidebar
             aria-label="Sidebar with multi-level dropdown example"
             className="[&>div]:bg-transparent [&>div]:p-0"
@@ -157,121 +116,44 @@ function Component() {
                 <form className="pb-3 md:hidden">
                   <TextInput icon={HiSearch} type="search" placeholder="Search" required size={32} />
                 </form>
-                <SidebarItems>
-                  <SidebarItemGroup>
-                    <SidebarItem href="/" icon={HiChartPie}>
+                <Sidebar.Items>
+                  <Sidebar.ItemGroup>
+                    <Sidebar.Item href="/" icon={HiChartPie}>
                       Dashboard
-                    </SidebarItem>
-                    <SidebarItem href="/e-commerce/products" icon={HiShoppingBag}>
+                    </Sidebar.Item>
+                    <Sidebar.Item href="/e-commerce/products" icon={HiShoppingBag}>
                       Products
-                    </SidebarItem>
-                    <SidebarItem href="/users/list" icon={HiUsers}>
+                    </Sidebar.Item>
+                    <Sidebar.Item href="/users/list" icon={HiUsers}>
                       Users list
-                    </SidebarItem>
-                    <SidebarItem href="/authentication/sign-in" icon={HiLogin}>
+                    </Sidebar.Item>
+                    <Sidebar.Item href="/authentication/sign-in" icon={HiLogin}>
                       Sign in
-                    </SidebarItem>
-                    <SidebarItem href="/authentication/sign-up" icon={HiPencil}>
+                    </Sidebar.Item>
+                    <Sidebar.Item href="/authentication/sign-up" icon={HiPencil}>
                       Sign up
-                    </SidebarItem>
-                  </SidebarItemGroup>
-                  <SidebarItemGroup>
-                    <SidebarItem href="https://github.com/themesberg/flowbite-react/" icon={HiClipboard}>
+                    </Sidebar.Item>
+                  </Sidebar.ItemGroup>
+                  <Sidebar.ItemGroup>
+                    <Sidebar.Item href="https://github.com/themesberg/flowbite-react/" icon={HiClipboard}>
                       Docs
-                    </SidebarItem>
-                    <SidebarItem href="https://flowbite-react.com/" icon={HiCollection}>
+                    </Sidebar.Item>
+                    <Sidebar.Item href="https://flowbite-react.com/" icon={HiCollection}>
                       Components
-                    </SidebarItem>
-                    <SidebarItem href="https://github.com/themesberg/flowbite-react/issues" icon={HiInformationCircle}>
+                    </Sidebar.Item>
+                    <Sidebar.Item href="https://github.com/themesberg/flowbite-react/issues" icon={HiInformationCircle}>
                       Help
-                    </SidebarItem>
-                  </SidebarItemGroup>
-                </SidebarItems>
+                    </Sidebar.Item>
+                  </Sidebar.ItemGroup>
+                </Sidebar.Items>
               </div>
             </div>
           </Sidebar>
-        </DrawerItems>
+        </Drawer.Items>
       </Drawer>
     </>
   );
 }
-`;
-
-function Component() {
-  const [isOpen, setIsOpen] = useState(true);
-
-  const handleClose = () => setIsOpen(false);
-
-  return (
-    <div className="relative z-50 -m-5 w-auto overflow-hidden">
-      <div className="flex min-h-[50vh] items-center justify-center">
-        <Button onClick={() => setIsOpen(true)}>Show drawer without backdrop</Button>
-      </div>
-      <Drawer
-        backdrop={false}
-        open={isOpen}
-        onClose={handleClose}
-        theme={{
-          root: {
-            base: twMerge(theme.drawer.root.base, "absolute"),
-            position: {
-              left: {
-                on: twMerge(theme.drawer.root.position.left.on, "h-full"),
-                off: twMerge(theme.drawer.root.position.left.off, "h-full"),
-              },
-            },
-          },
-        }}
-      >
-        <DrawerHeader title="MENU" titleIcon={() => <></>} />
-        <DrawerItems>
-          <Sidebar
-            aria-label="Sidebar with multi-level dropdown example"
-            className="[&>div]:bg-transparent [&>div]:p-0"
-          >
-            <div className="flex h-full flex-col justify-between py-2">
-              <div>
-                <form className="pb-3 md:hidden">
-                  <TextInput icon={HiSearch} type="search" placeholder="Search" required size={32} />
-                </form>
-                <SidebarItems>
-                  <SidebarItemGroup>
-                    <SidebarItem href="/" icon={HiChartPie}>
-                      Dashboard
-                    </SidebarItem>
-                    <SidebarItem href="/e-commerce/products" icon={HiShoppingBag}>
-                      Products
-                    </SidebarItem>
-                    <SidebarItem href="/users/list" icon={HiUsers}>
-                      Users list
-                    </SidebarItem>
-                    <SidebarItem href="/authentication/sign-in" icon={HiLogin}>
-                      Sign in
-                    </SidebarItem>
-                    <SidebarItem href="/authentication/sign-up" icon={HiPencil}>
-                      Sign up
-                    </SidebarItem>
-                  </SidebarItemGroup>
-                  <SidebarItemGroup>
-                    <SidebarItem href="https://github.com/themesberg/flowbite-react/" icon={HiClipboard}>
-                      Docs
-                    </SidebarItem>
-                    <SidebarItem href="https://flowbite-react.com/" icon={HiCollection}>
-                      Components
-                    </SidebarItem>
-                    <SidebarItem href="https://github.com/themesberg/flowbite-react/issues" icon={HiInformationCircle}>
-                      Help
-                    </SidebarItem>
-                  </SidebarItemGroup>
-                </SidebarItems>
-              </div>
-            </div>
-          </Sidebar>
-        </DrawerItems>
-      </Drawer>
-    </div>
-  );
-}
 
 export const noBackdrop: CodeData = {
   type: "single",
@@ -281,12 +163,8 @@ export const noBackdrop: CodeData = {
       language: "tsx",
       code,
     },
-    {
-      fileName: "server",
-      language: "tsx",
-      code: codeRSC,
-    },
   ],
   githubSlug: "drawer/drawer.noBackdrop.tsx",
   component: <Component />,
+  iframe: 600,
 };
diff --git a/apps/web/examples/drawer/drawer.noBodyScrolling.tsx b/apps/web/examples/drawer/drawer.noBodyScrolling.tsx
index 731bd8199..71c2e3f7d 100644
--- a/apps/web/examples/drawer/drawer.noBodyScrolling.tsx
+++ b/apps/web/examples/drawer/drawer.noBodyScrolling.tsx
@@ -1,17 +1,6 @@
 "use client";
 
-import {
-  Button,
-  Drawer,
-  DrawerHeader,
-  DrawerItems,
-  Sidebar,
-  SidebarItem,
-  SidebarItemGroup,
-  SidebarItems,
-  TextInput,
-  theme,
-} from "flowbite-react";
+import { Button, Drawer, Sidebar, TextInput } from "flowbite-react";
 import { useState } from "react";
 import {
   HiChartPie,
@@ -24,18 +13,12 @@ import {
   HiShoppingBag,
   HiUsers,
 } from "react-icons/hi";
-import { twMerge } from "tailwind-merge";
 import type { CodeData } from "~/components/code-demo";
 
 const code = `
 "use client";
 
-import {
-  Button,
-  Drawer,
-  Sidebar,
-  TextInput,
-} from "flowbite-react";
+import { Button, Drawer, Sidebar, TextInput } from "flowbite-react";
 import { useState } from "react";
 import {
   HiChartPie,
@@ -49,7 +32,7 @@ import {
   HiUsers,
 } from "react-icons/hi";
 
-function Component() {
+export function Component() {
   const [isOpen, setIsOpen] = useState(true);
 
   const handleClose = () => setIsOpen(false);
@@ -110,32 +93,8 @@ function Component() {
   );
 }
 `;
-const codeRSC = `
-import {
-  Button,
-  Drawer,
-  DrawerHeader,
-  DrawerItems,
-  Sidebar,
-  SidebarItem,
-  SidebarItemGroup,
-  SidebarItems,
-  TextInput,
-} from "flowbite-react";
-import { useState } from "react";
-import {
-  HiChartPie,
-  HiClipboard,
-  HiCollection,
-  HiInformationCircle,
-  HiLogin,
-  HiPencil,
-  HiSearch,
-  HiShoppingBag,
-  HiUsers,
-} from "react-icons/hi";
 
-function Component() {
+export function Component() {
   const [isOpen, setIsOpen] = useState(true);
 
   const handleClose = () => setIsOpen(false);
@@ -146,8 +105,8 @@ function Component() {
         <Button onClick={() => setIsOpen(true)}>Show navigation</Button>
       </div>
       <Drawer open={isOpen} onClose={handleClose}>
-        <DrawerHeader title="MENU" titleIcon={() => <></>} />
-        <DrawerItems>
+        <Drawer.Header title="MENU" titleIcon={() => <></>} />
+        <Drawer.Items>
           <Sidebar
             aria-label="Sidebar with multi-level dropdown example"
             className="[&>div]:bg-transparent [&>div]:p-0"
@@ -157,121 +116,44 @@ function Component() {
                 <form className="pb-3 md:hidden">
                   <TextInput icon={HiSearch} type="search" placeholder="Search" required size={32} />
                 </form>
-                <SidebarItems>
-                  <SidebarItemGroup>
-                    <SidebarItem href="/" icon={HiChartPie}>
+                <Sidebar.Items>
+                  <Sidebar.ItemGroup>
+                    <Sidebar.Item href="/" icon={HiChartPie}>
                       Dashboard
-                    </SidebarItem>
-                    <SidebarItem href="/e-commerce/products" icon={HiShoppingBag}>
+                    </Sidebar.Item>
+                    <Sidebar.Item href="/e-commerce/products" icon={HiShoppingBag}>
                       Products
-                    </SidebarItem>
-                    <SidebarItem href="/users/list" icon={HiUsers}>
+                    </Sidebar.Item>
+                    <Sidebar.Item href="/users/list" icon={HiUsers}>
                       Users list
-                    </SidebarItem>
-                    <SidebarItem href="/authentication/sign-in" icon={HiLogin}>
+                    </Sidebar.Item>
+                    <Sidebar.Item href="/authentication/sign-in" icon={HiLogin}>
                       Sign in
-                    </SidebarItem>
-                    <SidebarItem href="/authentication/sign-up" icon={HiPencil}>
+                    </Sidebar.Item>
+                    <Sidebar.Item href="/authentication/sign-up" icon={HiPencil}>
                       Sign up
-                    </SidebarItem>
-                  </SidebarItemGroup>
-                  <SidebarItemGroup>
-                    <SidebarItem href="https://github.com/themesberg/flowbite-react/" icon={HiClipboard}>
+                    </Sidebar.Item>
+                  </Sidebar.ItemGroup>
+                  <Sidebar.ItemGroup>
+                    <Sidebar.Item href="https://github.com/themesberg/flowbite-react/" icon={HiClipboard}>
                       Docs
-                    </SidebarItem>
-                    <SidebarItem href="https://flowbite-react.com/" icon={HiCollection}>
+                    </Sidebar.Item>
+                    <Sidebar.Item href="https://flowbite-react.com/" icon={HiCollection}>
                       Components
-                    </SidebarItem>
-                    <SidebarItem href="https://github.com/themesberg/flowbite-react/issues" icon={HiInformationCircle}>
+                    </Sidebar.Item>
+                    <Sidebar.Item href="https://github.com/themesberg/flowbite-react/issues" icon={HiInformationCircle}>
                       Help
-                    </SidebarItem>
-                  </SidebarItemGroup>
-                </SidebarItems>
+                    </Sidebar.Item>
+                  </Sidebar.ItemGroup>
+                </Sidebar.Items>
               </div>
             </div>
           </Sidebar>
-        </DrawerItems>
+        </Drawer.Items>
       </Drawer>
     </>
   );
 }
-`;
-
-function Component() {
-  const [isOpen, setIsOpen] = useState(true);
-
-  const handleClose = () => setIsOpen(false);
-
-  return (
-    <div className="relative z-50 -m-5 w-auto overflow-hidden">
-      <div className="flex min-h-[50vh] items-center justify-center">
-        <Button onClick={() => setIsOpen(true)}>Show body scrolling disabled</Button>
-      </div>
-      <Drawer
-        open={isOpen}
-        onClose={handleClose}
-        theme={{
-          root: {
-            base: twMerge(theme.drawer.root.base, "absolute"),
-            backdrop: twMerge(theme.drawer.root.backdrop, "absolute"),
-            position: {
-              left: {
-                on: twMerge(theme.drawer.root.position.left.on, "h-full"),
-                off: twMerge(theme.drawer.root.position.left.off, "h-full"),
-              },
-            },
-          },
-        }}
-      >
-        <DrawerHeader title="MENU" titleIcon={() => <></>} />
-        <DrawerItems>
-          <Sidebar
-            aria-label="Sidebar with multi-level dropdown example"
-            className="[&>div]:bg-transparent [&>div]:p-0"
-          >
-            <div className="flex h-full flex-col justify-between py-2">
-              <div>
-                <form className="pb-3 md:hidden">
-                  <TextInput icon={HiSearch} type="search" placeholder="Search" required size={32} />
-                </form>
-                <SidebarItems>
-                  <SidebarItemGroup>
-                    <SidebarItem href="/" icon={HiChartPie}>
-                      Dashboard
-                    </SidebarItem>
-                    <SidebarItem href="/e-commerce/products" icon={HiShoppingBag}>
-                      Products
-                    </SidebarItem>
-                    <SidebarItem href="/users/list" icon={HiUsers}>
-                      Users list
-                    </SidebarItem>
-                    <SidebarItem href="/authentication/sign-in" icon={HiLogin}>
-                      Sign in
-                    </SidebarItem>
-                    <SidebarItem href="/authentication/sign-up" icon={HiPencil}>
-                      Sign up
-                    </SidebarItem>
-                  </SidebarItemGroup>
-                  <SidebarItemGroup>
-                    <SidebarItem href="https://github.com/themesberg/flowbite-react/" icon={HiClipboard}>
-                      Docs
-                    </SidebarItem>
-                    <SidebarItem href="https://flowbite-react.com/" icon={HiCollection}>
-                      Components
-                    </SidebarItem>
-                    <SidebarItem href="https://github.com/themesberg/flowbite-react/issues" icon={HiInformationCircle}>
-                      Help
-                    </SidebarItem>
-                  </SidebarItemGroup>
-                </SidebarItems>
-              </div>
-            </div>
-          </Sidebar>
-        </DrawerItems>
-      </Drawer>
-    </div>
-  );
-}
 
 export const noBodyScrolling: CodeData = {
   type: "single",
@@ -281,12 +163,8 @@ export const noBodyScrolling: CodeData = {
       language: "tsx",
       code,
     },
-    {
-      fileName: "server",
-      language: "tsx",
-      code: codeRSC,
-    },
   ],
   githubSlug: "drawer/drawer.noBodyScrolling.tsx",
   component: <Component />,
+  iframe: 600,
 };
diff --git a/apps/web/examples/drawer/drawer.right.tsx b/apps/web/examples/drawer/drawer.right.tsx
index ecc2c254f..ac6641e30 100644
--- a/apps/web/examples/drawer/drawer.right.tsx
+++ b/apps/web/examples/drawer/drawer.right.tsx
@@ -1,8 +1,7 @@
 "use client";
 
-import { Button, Drawer, DrawerHeader, DrawerItems, theme } from "flowbite-react";
+import { Button, Drawer } from "flowbite-react";
 import { useState } from "react";
-import { twMerge } from "tailwind-merge";
 import type { CodeData } from "~/components/code-demo";
 
 const code = `
@@ -11,7 +10,7 @@ const code = `
 import { Button, Drawer } from "flowbite-react";
 import { useState } from "react";
 
-function Component() {
+export function Component() {
   const [isOpen, setIsOpen] = useState(true);
 
   const handleClose = () => setIsOpen(false);
@@ -67,11 +66,8 @@ function Component() {
   );
 }
 `;
-const codeRSC = `
-import { Button, Drawer, DrawerHeader, DrawerItems } from "flowbite-react";
-import { useState } from "react";
 
-function Component() {
+export function Component() {
   const [isOpen, setIsOpen] = useState(true);
 
   const handleClose = () => setIsOpen(false);
@@ -82,8 +78,8 @@ function Component() {
         <Button onClick={() => setIsOpen(true)}>Show right drawer</Button>
       </div>
       <Drawer open={isOpen} onClose={handleClose} position="right">
-        <DrawerHeader title="Drawer" />
-        <DrawerItems>
+        <Drawer.Header title="Drawer" />
+        <Drawer.Items>
           <p className="mb-6 text-sm text-gray-500 dark:text-gray-400">
             Supercharge your hiring by taking advantage of our&nbsp;
             <a href="#" className="text-cyan-600 underline hover:no-underline dark:text-cyan-500">
@@ -121,84 +117,11 @@ function Component() {
               </svg>
             </a>
           </div>
-        </DrawerItems>
+        </Drawer.Items>
       </Drawer>
     </>
   );
 }
-`;
-
-function Component() {
-  const [isOpen, setIsOpen] = useState(true);
-
-  const handleClose = () => setIsOpen(false);
-
-  return (
-    <div className="relative z-50 -m-5 w-auto overflow-hidden">
-      <div className="flex min-h-[50vh] items-center justify-center">
-        <Button onClick={() => setIsOpen(true)}>Show right drawer</Button>
-      </div>
-      <Drawer
-        open={isOpen}
-        onClose={handleClose}
-        position="right"
-        theme={{
-          root: {
-            base: twMerge(theme.drawer.root.base, "absolute"),
-            backdrop: twMerge(theme.drawer.root.backdrop, "absolute"),
-            position: {
-              right: {
-                on: twMerge(theme.drawer.root.position.right.on, "h-full"),
-                off: twMerge(theme.drawer.root.position.right.off, "h-full"),
-              },
-            },
-          },
-        }}
-      >
-        <DrawerHeader title="Drawer" />
-        <DrawerItems>
-          <p className="mb-6 text-sm text-gray-500 dark:text-gray-400">
-            Supercharge your hiring by taking advantage of our&nbsp;
-            <a href="#" className="text-cyan-600 underline hover:no-underline dark:text-cyan-500">
-              limited-time sale
-            </a>
-            &nbsp;for Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design
-            job board.
-          </p>
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <a
-              href="#"
-              className="rounded-lg border border-gray-200 bg-white px-4 py-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-cyan-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
-            >
-              Learn more
-            </a>
-            <a
-              href="#"
-              className="inline-flex items-center rounded-lg bg-cyan-700 px-4 py-2 text-center text-sm font-medium text-white hover:bg-cyan-800 focus:outline-none focus:ring-4 focus:ring-cyan-300 dark:bg-cyan-600 dark:hover:bg-cyan-700 dark:focus:ring-cyan-800"
-            >
-              Get access&nbsp;
-              <svg
-                className="ms-2 h-3.5 w-3.5 rtl:rotate-180"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 14 10"
-              >
-                <path
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M1 5h12m0 0L9 1m4 4L9 9"
-                />
-              </svg>
-            </a>
-          </div>
-        </DrawerItems>
-      </Drawer>
-    </div>
-  );
-}
 
 export const right: CodeData = {
   type: "single",
@@ -208,12 +131,8 @@ export const right: CodeData = {
       language: "tsx",
       code,
     },
-    {
-      fileName: "server",
-      language: "tsx",
-      code: codeRSC,
-    },
   ],
   githubSlug: "drawer/drawer.right.tsx",
   component: <Component />,
+  iframe: 600,
 };
diff --git a/apps/web/examples/drawer/drawer.root.tsx b/apps/web/examples/drawer/drawer.root.tsx
index 9f62f5c67..d4865613a 100644
--- a/apps/web/examples/drawer/drawer.root.tsx
+++ b/apps/web/examples/drawer/drawer.root.tsx
@@ -1,8 +1,7 @@
 "use client";
 
-import { Button, Drawer, DrawerHeader, DrawerItems, theme } from "flowbite-react";
+import { Button, Drawer } from "flowbite-react";
 import { useState } from "react";
-import { twMerge } from "tailwind-merge";
 import type { CodeData } from "~/components/code-demo";
 
 const code = `
@@ -11,7 +10,7 @@ const code = `
 import { Button, Drawer } from "flowbite-react";
 import { useState } from "react";
 
-function Component() {
+export function Component() {
   const [isOpen, setIsOpen] = useState(true);
 
   const handleClose = () => setIsOpen(false);
@@ -67,11 +66,8 @@ function Component() {
   );
 }
 `;
-const codeRSC = `
-import { Button, Drawer, DrawerHeader, DrawerItems } from "flowbite-react";
-import { useState } from "react";
 
-function Component() {
+export function Component() {
   const [isOpen, setIsOpen] = useState(true);
 
   const handleClose = () => setIsOpen(false);
@@ -82,8 +78,8 @@ function Component() {
         <Button onClick={() => setIsOpen(true)}>Show drawer</Button>
       </div>
       <Drawer open={isOpen} onClose={handleClose}>
-        <DrawerHeader title="Drawer" />
-        <DrawerItems>
+        <Drawer.Header title="Drawer" />
+        <Drawer.Items>
           <p className="mb-6 text-sm text-gray-500 dark:text-gray-400">
             Supercharge your hiring by taking advantage of our&nbsp;
             <a href="#" className="text-cyan-600 underline hover:no-underline dark:text-cyan-500">
@@ -121,83 +117,11 @@ function Component() {
               </svg>
             </a>
           </div>
-        </DrawerItems>
+        </Drawer.Items>
       </Drawer>
     </>
   );
 }
-`;
-
-function Component() {
-  const [isOpen, setIsOpen] = useState(true);
-
-  const handleClose = () => setIsOpen(false);
-
-  return (
-    <div className="relative z-50 -m-5 w-auto overflow-hidden">
-      <div className="flex min-h-[50vh] items-center justify-center">
-        <Button onClick={() => setIsOpen(true)}>Show drawer</Button>
-      </div>
-      <Drawer
-        open={isOpen}
-        onClose={handleClose}
-        theme={{
-          root: {
-            base: twMerge(theme.drawer.root.base, "absolute"),
-            backdrop: twMerge(theme.drawer.root.backdrop, "absolute"),
-            position: {
-              left: {
-                on: twMerge(theme.drawer.root.position.left.on, "h-full"),
-                off: twMerge(theme.drawer.root.position.left.off, "h-full"),
-              },
-            },
-          },
-        }}
-      >
-        <DrawerHeader title="Drawer" />
-        <DrawerItems>
-          <p className="mb-6 text-sm text-gray-500 dark:text-gray-400">
-            Supercharge your hiring by taking advantage of our&nbsp;
-            <a href="#" className="text-cyan-600 underline hover:no-underline dark:text-cyan-500">
-              limited-time sale
-            </a>
-            &nbsp;for Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design
-            job board.
-          </p>
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <a
-              href="#"
-              className="rounded-lg border border-gray-200 bg-white px-4 py-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-cyan-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
-            >
-              Learn more
-            </a>
-            <a
-              href="#"
-              className="inline-flex items-center rounded-lg bg-cyan-700 px-4 py-2 text-center text-sm font-medium text-white hover:bg-cyan-800 focus:outline-none focus:ring-4 focus:ring-cyan-300 dark:bg-cyan-600 dark:hover:bg-cyan-700 dark:focus:ring-cyan-800"
-            >
-              Get access&nbsp;
-              <svg
-                className="ms-2 h-3.5 w-3.5 rtl:rotate-180"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 14 10"
-              >
-                <path
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M1 5h12m0 0L9 1m4 4L9 9"
-                />
-              </svg>
-            </a>
-          </div>
-        </DrawerItems>
-      </Drawer>
-    </div>
-  );
-}
 
 export const root: CodeData = {
   type: "single",
@@ -207,12 +131,8 @@ export const root: CodeData = {
       language: "tsx",
       code,
     },
-    {
-      fileName: "server",
-      language: "tsx",
-      code: codeRSC,
-    },
   ],
   githubSlug: "drawer/drawer.root.tsx",
   component: <Component />,
+  iframe: 600,
 };
diff --git a/apps/web/examples/drawer/drawer.swipeableEdge.tsx b/apps/web/examples/drawer/drawer.swipeableEdge.tsx
index 7a592174e..cbffc616e 100644
--- a/apps/web/examples/drawer/drawer.swipeableEdge.tsx
+++ b/apps/web/examples/drawer/drawer.swipeableEdge.tsx
@@ -1,9 +1,8 @@
 "use client";
 
-import { Button, Drawer, DrawerHeader, DrawerItems, theme } from "flowbite-react";
+import { Button, Drawer } from "flowbite-react";
 import { useState } from "react";
 import { HiBars2, HiSquaresPlus } from "react-icons/hi2";
-import { twMerge } from "tailwind-merge";
 import type { CodeData } from "~/components/code-demo";
 
 const code = `
@@ -13,7 +12,7 @@ import { Button, Drawer } from "flowbite-react";
 import { useState } from "react";
 import { HiBars2, HiSquaresPlus } from "react-icons/hi2";
 
-function Component() {
+export function Component() {
   const [isOpen, setIsOpen] = useState(true);
 
   const handleClose = () => setIsOpen(false);
@@ -101,9 +100,9 @@ function Component() {
                 >
                   <path
                     stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
                     d="M5 2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1M2 5h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm8 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"
                   />
                 </svg>
@@ -149,9 +148,9 @@ function Component() {
                 >
                   <path
                     stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
                     d="M4 12.25V1m0 11.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M4 19v-2.25m6-13.5V1m0 2.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M10 19V7.75m6 4.5V1m0 11.25a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM16 19v-2"
                   />
                 </svg>
@@ -165,12 +164,8 @@ function Component() {
   );
 }
 `;
-const codeRSC = `
-import { Button, Drawer, DrawerHeader, DrawerItems } from "flowbite-react";
-import { useState } from "react";
-import { HiBars2, HiSquaresPlus } from "react-icons/hi2";
 
-function Component() {
+export function Component() {
   const [isOpen, setIsOpen] = useState(true);
 
   const handleClose = () => setIsOpen(false);
@@ -181,14 +176,14 @@ function Component() {
         <Button onClick={() => setIsOpen(true)}>Show swipeable drawer</Button>
       </div>
       <Drawer edge open={isOpen} onClose={handleClose} position="bottom" className="p-0">
-        <DrawerHeader
+        <Drawer.Header
           closeIcon={HiBars2}
           title="Add widget"
           titleIcon={HiSquaresPlus}
           onClick={() => setIsOpen(!isOpen)}
           className="cursor-pointer px-4 pt-4 hover:bg-gray-50 dark:hover:bg-gray-700"
         />
-        <DrawerItems className="p-4">
+        <Drawer.Items className="p-4">
           <div className="grid grid-cols-3 gap-4 p-4 lg:grid-cols-4">
             <div className="cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600">
               <div className="mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600">
@@ -258,9 +253,9 @@ function Component() {
                 >
                   <path
                     stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
                     d="M5 2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1M2 5h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm8 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"
                   />
                 </svg>
@@ -306,9 +301,9 @@ function Component() {
                 >
                   <path
                     stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
                     d="M4 12.25V1m0 11.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M4 19v-2.25m6-13.5V1m0 2.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M10 19V7.75m6 4.5V1m0 11.25a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM16 19v-2"
                   />
                 </svg>
@@ -316,175 +311,11 @@ function Component() {
               <div className="text-center font-medium text-gray-500 dark:text-gray-400">Custom</div>
             </div>
           </div>
-        </DrawerItems>
+        </Drawer.Items>
       </Drawer>
     </>
   );
 }
-`;
-
-function Component() {
-  const [isOpen, setIsOpen] = useState(true);
-
-  const handleClose = () => setIsOpen(false);
-
-  return (
-    <div className="relative z-50 -m-5 w-auto overflow-hidden">
-      <div className="flex min-h-[50vh] items-center justify-center">
-        <Button onClick={() => setIsOpen(true)}>Show swipeable drawer</Button>
-      </div>
-      <Drawer
-        edge
-        open={isOpen}
-        onClose={handleClose}
-        position="bottom"
-        theme={{
-          root: {
-            base: twMerge(theme.drawer.root.base, "absolute p-0"),
-            backdrop: twMerge(theme.drawer.root.backdrop, "absolute"),
-          },
-        }}
-      >
-        <DrawerHeader
-          closeIcon={HiBars2}
-          title="Add widget"
-          titleIcon={HiSquaresPlus}
-          onClick={() => setIsOpen(!isOpen)}
-          className="cursor-pointer px-4 pt-4 hover:bg-gray-50 dark:hover:bg-gray-700"
-        />
-        <DrawerItems className="p-4">
-          <div className="grid grid-cols-3 gap-4 p-4 lg:grid-cols-4">
-            <div className="cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600">
-              <div className="mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600">
-                <svg
-                  className="inline h-5 w-5 text-gray-500 dark:text-gray-400"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  viewBox="0 0 22 21"
-                >
-                  <path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z" />
-                  <path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
-                </svg>
-              </div>
-              <div className="text-center font-medium text-gray-500 dark:text-gray-400">Chart</div>
-            </div>
-            <div className="cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600">
-              <div className="mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600">
-                <svg
-                  className="inline h-5 w-5 text-gray-500 dark:text-gray-400"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  viewBox="0 0 20 14"
-                >
-                  <path d="M18 0H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2ZM9 6v2H2V6h7Zm2 0h7v2h-7V6Zm-9 4h7v2H2v-2Zm9 2v-2h7v2h-7Z" />
-                </svg>
-              </div>
-              <div className="text-center font-medium text-gray-500 dark:text-gray-400">Table</div>
-            </div>
-            <div className="hidden cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 lg:block dark:bg-gray-700 dark:hover:bg-gray-600">
-              <div className="mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600">
-                <svg
-                  className="inline h-5 w-5 text-gray-500 dark:text-gray-400"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  viewBox="0 0 14 20"
-                >
-                  <path d="M13.383.076a1 1 0 0 0-1.09.217L11 1.586 9.707.293a1 1 0 0 0-1.414 0L7 1.586 5.707.293a1 1 0 0 0-1.414 0L3 1.586 1.707.293A1 1 0 0 0 0 1v18a1 1 0 0 0 1.707.707L3 18.414l1.293 1.293a1 1 0 0 0 1.414 0L7 18.414l1.293 1.293a1 1 0 0 0 1.414 0L11 18.414l1.293 1.293A1 1 0 0 0 14 19V1a1 1 0 0 0-.617-.924ZM10 15H4a1 1 0 1 1 0-2h6a1 1 0 0 1 0 2Zm0-4H4a1 1 0 1 1 0-2h6a1 1 0 1 1 0 2Zm0-4H4a1 1 0 0 1 0-2h6a1 1 0 1 1 0 2Z" />
-                </svg>
-              </div>
-              <div className="hidden text-center font-medium text-gray-500 dark:text-gray-400">Ticket</div>
-            </div>
-            <div className="cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600">
-              <div className="mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600">
-                <svg
-                  className="inline h-5 w-5 text-gray-500 dark:text-gray-400"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  viewBox="0 0 18 20"
-                >
-                  <path d="M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z" />
-                </svg>
-              </div>
-              <div className="text-center font-medium text-gray-500 dark:text-gray-400">List</div>
-            </div>
-            <div className="cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600">
-              <div className="mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600">
-                <svg
-                  className="inline h-5 w-5 text-gray-500 dark:text-gray-400"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 20 16"
-                >
-                  <path
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M5 2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1M2 5h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm8 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"
-                  />
-                </svg>
-              </div>
-              <div className="text-center font-medium text-gray-500 dark:text-gray-400">Price</div>
-            </div>
-            <div className="cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600">
-              <div className="mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600">
-                <svg
-                  className="inline h-5 w-5 text-gray-500 dark:text-gray-400"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  viewBox="0 0 20 18"
-                >
-                  <path d="M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z" />
-                </svg>
-              </div>
-              <div className="text-center font-medium text-gray-500 dark:text-gray-400">Users</div>
-            </div>
-            <div className="hidden cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 lg:block dark:bg-gray-700 dark:hover:bg-gray-600">
-              <div className="mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600">
-                <svg
-                  className="inline h-5 w-5 text-gray-500 dark:text-gray-400"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  viewBox="0 0 20 18"
-                >
-                  <path d="M6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm-1.391 7.361.707-3.535a3 3 0 0 1 .82-1.533L7.929 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h4.259a2.975 2.975 0 0 1-.15-1.639ZM8.05 17.95a1 1 0 0 1-.981-1.2l.708-3.536a1 1 0 0 1 .274-.511l6.363-6.364a3.007 3.007 0 0 1 4.243 0 3.007 3.007 0 0 1 0 4.243l-6.365 6.363a1 1 0 0 1-.511.274l-3.536.708a1.07 1.07 0 0 1-.195.023Z" />
-                </svg>
-              </div>
-              <div className="text-center font-medium text-gray-500 dark:text-gray-400">Task</div>
-            </div>
-            <div className="cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600">
-              <div className="mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600">
-                <svg
-                  className="inline h-5 w-5 text-gray-500 dark:text-gray-400"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M4 12.25V1m0 11.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M4 19v-2.25m6-13.5V1m0 2.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M10 19V7.75m6 4.5V1m0 11.25a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM16 19v-2"
-                  />
-                </svg>
-              </div>
-              <div className="text-center font-medium text-gray-500 dark:text-gray-400">Custom</div>
-            </div>
-          </div>
-        </DrawerItems>
-      </Drawer>
-    </div>
-  );
-}
 
 export const swipeableEdge: CodeData = {
   type: "single",
@@ -494,12 +325,8 @@ export const swipeableEdge: CodeData = {
       language: "tsx",
       code,
     },
-    {
-      fileName: "server",
-      language: "tsx",
-      code: codeRSC,
-    },
   ],
   githubSlug: "drawer/drawer.swipeableEdge.tsx",
   component: <Component />,
+  iframe: 600,
 };
diff --git a/apps/web/examples/drawer/drawer.top.tsx b/apps/web/examples/drawer/drawer.top.tsx
index da798ba76..4322493ed 100644
--- a/apps/web/examples/drawer/drawer.top.tsx
+++ b/apps/web/examples/drawer/drawer.top.tsx
@@ -1,8 +1,7 @@
 "use client";
 
-import { Button, Drawer, DrawerHeader, DrawerItems, theme } from "flowbite-react";
+import { Button, Drawer } from "flowbite-react";
 import { useState } from "react";
-import { twMerge } from "tailwind-merge";
 import type { CodeData } from "~/components/code-demo";
 
 const code = `
@@ -11,7 +10,7 @@ const code = `
 import { Button, Drawer } from "flowbite-react";
 import { useState } from "react";
 
-function Component() {
+export function Component() {
   const [isOpen, setIsOpen] = useState(true);
 
   const handleClose = () => setIsOpen(false);
@@ -67,11 +66,8 @@ function Component() {
   );
 }
 `;
-const codeRSC = `
-import { Button, Drawer, DrawerHeader, DrawerItems } from "flowbite-react";
-import { useState } from "react";
 
-function Component() {
+export function Component() {
   const [isOpen, setIsOpen] = useState(true);
 
   const handleClose = () => setIsOpen(false);
@@ -82,8 +78,8 @@ function Component() {
         <Button onClick={() => setIsOpen(true)}>Show top drawer</Button>
       </div>
       <Drawer open={isOpen} onClose={handleClose} position="top">
-        <DrawerHeader title="Drawer" />
-        <DrawerItems>
+        <Drawer.Header title="Drawer" />
+        <Drawer.Items>
           <p className="mb-6 text-sm text-gray-500 dark:text-gray-400">
             Supercharge your hiring by taking advantage of our&nbsp;
             <a href="#" className="text-cyan-600 underline hover:no-underline dark:text-cyan-500">
@@ -121,78 +117,11 @@ function Component() {
               </svg>
             </a>
           </div>
-        </DrawerItems>
+        </Drawer.Items>
       </Drawer>
     </>
   );
 }
-`;
-
-function Component() {
-  const [isOpen, setIsOpen] = useState(true);
-
-  const handleClose = () => setIsOpen(false);
-
-  return (
-    <div className="relative z-50 -m-5 w-auto overflow-hidden">
-      <div className="flex min-h-[50vh] items-center justify-center overflow-hidden">
-        <Button onClick={() => setIsOpen(true)}>Show top drawer</Button>
-      </div>
-      <Drawer
-        open={isOpen}
-        onClose={handleClose}
-        position="top"
-        theme={{
-          root: {
-            base: twMerge(theme.drawer.root.base, "absolute"),
-            backdrop: twMerge(theme.drawer.root.backdrop, "absolute"),
-          },
-        }}
-      >
-        <DrawerHeader title="Drawer" />
-        <DrawerItems>
-          <p className="mb-6 text-sm text-gray-500 dark:text-gray-400">
-            Supercharge your hiring by taking advantage of our&nbsp;
-            <a href="#" className="text-cyan-600 underline hover:no-underline dark:text-cyan-500">
-              limited-time sale
-            </a>
-            &nbsp;for Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design
-            job board.
-          </p>
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <a
-              href="#"
-              className="rounded-lg border border-gray-200 bg-white px-4 py-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-cyan-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
-            >
-              Learn more
-            </a>
-            <a
-              href="#"
-              className="inline-flex items-center rounded-lg bg-cyan-700 px-4 py-2 text-center text-sm font-medium text-white hover:bg-cyan-800 focus:outline-none focus:ring-4 focus:ring-cyan-300 dark:bg-cyan-600 dark:hover:bg-cyan-700 dark:focus:ring-cyan-800"
-            >
-              Get access&nbsp;
-              <svg
-                className="ms-2 h-3.5 w-3.5 rtl:rotate-180"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 14 10"
-              >
-                <path
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M1 5h12m0 0L9 1m4 4L9 9"
-                />
-              </svg>
-            </a>
-          </div>
-        </DrawerItems>
-      </Drawer>
-    </div>
-  );
-}
 
 export const top: CodeData = {
   type: "single",
@@ -202,12 +131,8 @@ export const top: CodeData = {
       language: "tsx",
       code,
     },
-    {
-      fileName: "server",
-      language: "tsx",
-      code: codeRSC,
-    },
   ],
   githubSlug: "drawer/drawer.top.tsx",
   component: <Component />,
+  iframe: 600,
 };