diff --git a/packages/reflex-components-internal/src/reflex_components_internal/components/base/drawer.py b/packages/reflex-components-internal/src/reflex_components_internal/components/base/drawer.py
index 9ce7fc2e7ec..e286da33d70 100644
--- a/packages/reflex-components-internal/src/reflex_components_internal/components/base/drawer.py
+++ b/packages/reflex-components-internal/src/reflex_components_internal/components/base/drawer.py
@@ -3,12 +3,17 @@
 from collections.abc import Sequence
 from typing import Literal
 
+from reflex_components_core.el.elements.typography import Div
+
 from reflex.components.component import Component, ComponentNamespace
 from reflex.event import EventHandler, passthrough_event_spec
+from reflex.utils.imports import ImportVar
 from reflex.vars.base import Var
-from reflex_components_internal.components.component import CoreComponent
+from reflex_components_internal.components.base.button import button
+from reflex_components_internal.components.base_ui import PACKAGE_NAME, BaseUIComponent
+from reflex_components_internal.components.icons.hugeicon import hi
 
-LiteralDirectionType = Literal["top", "bottom", "left", "right"]
+LiteralSwipeDirectionType = Literal["up", "down", "left", "right"]
 
 
 class ClassNames:
@@ -17,18 +22,30 @@ class ClassNames:
     ROOT = ""
     TRIGGER = ""
     PORTAL = ""
-    CONTENT = "fixed right-0 bottom-0 z-50 bg-secondary-1 max-w-96 border-l border-secondary-a4 size-full flex"
-    OVERLAY = "fixed inset-0 z-50 bg-black/50"
-    CLOSE = ""
+    BACKDROP = "fixed inset-0 bg-black opacity-40 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-80"
+    VIEWPORT = "fixed inset-0 flex items-end justify-center"
+    POPUP = "w-full max-h-[80vh] -mb-[3rem] rounded-t-2xl border border-secondary-a4 bg-secondary-1 px-6 pt-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] text-secondary-12 overflow-y-auto overscroll-contain touch-auto [transform:translateY(var(--drawer-swipe-movement-y))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:select-none data-[ending-style]:[transform:translateY(calc(100%-3rem+2px))] data-[starting-style]:[transform:translateY(calc(100%-3rem+2px))] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)]"
+    CONTENT = "mx-auto w-full max-w-[32rem]"
     TITLE = "text-2xl font-semibold text-secondary-12"
     DESCRIPTION = "text-sm text-secondary-11"
-    HANDLE = ""
+    CLOSE = ""
+    HANDLE = "w-12 h-1 mx-auto mb-4 rounded-full bg-secondary-a6"
+    HEADER = "flex flex-col gap-2 pb-4"
+    SWIPE_AREA = ""
+    PROVIDER = ""
+    INDENT_BACKGROUND = ""
+    INDENT = ""
 
 
-class DrawerBaseComponent(CoreComponent):
+class DrawerBaseComponent(BaseUIComponent):
     """Base component for drawer components."""
 
-    library = "vaul-base@0.0.6"
+    library = f"{PACKAGE_NAME}/drawer"
+
+    @property
+    def import_var(self):
+        """Return the import variable for the drawer component."""
+        return ImportVar(tag="Drawer", package_path="", install=False)
 
 
 class DrawerRoot(DrawerBaseComponent):
@@ -39,50 +56,35 @@ class DrawerRoot(DrawerBaseComponent):
     # The open state of the drawer when it is initially rendered. Use when you do not need to control its open state.
     default_open: Var[bool]
 
-    # Whether the drawer is open or not.
+    # Whether the drawer is currently open.
     open: Var[bool]
 
-    # Fires when the drawer is opened or closed.
-    on_open_change: EventHandler[passthrough_event_spec(bool)]
+    # Event handler called when the drawer is opened or closed.
+    on_open_change: EventHandler[passthrough_event_spec(bool, dict)]
 
-    # When False, it allows interaction with elements outside of the drawer without closing it. Defaults to True.
-    modal: Var[bool]
+    # Direction of the swipe gesture to dismiss. Defaults to 'down'.
+    swipe_direction: Var[LiteralSwipeDirectionType]
 
-    # Direction of the drawer. This adjusts the animations and the drag direction. Defaults to "bottom"
-    direction: Var[LiteralDirectionType]
+    # Determines if the drawer enters a modal state when open.
+    modal: Var[bool | Literal["trap-focus"]]
 
-    # Gets triggered after the open or close animation ends, it receives an open argument with the open state of the drawer by the time the function was triggered.
-    on_animation_end: EventHandler[passthrough_event_spec(bool)]
+    # Determines whether pointer dismissal (clicking outside) is disabled. Defaults to False.
+    disable_pointer_dismissal: Var[bool]
 
-    # When False, dragging, clicking outside, pressing esc, etc. will not close the drawer. Use this in combination with the open prop, otherwise you won't be able to open/close the drawer.
-    dismissible: Var[bool]
-
-    # When True, dragging will only be possible by the handle.
-    handle_only: Var[bool]
-
-    # Container element to render the portal into. Defaults to document.body.
-    container: Var[str]
+    # Event handler called after any animations complete when the drawer is opened or closed.
+    on_open_change_complete: EventHandler[passthrough_event_spec(bool)]
 
-    # Whether to reposition inputs when the drawer opens. Defaults to True.
-    reposition_inputs: Var[bool]
-
-    # Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible. Also Accept px values, which doesn't take screen height into account.
+    # Array of snap points. Numbers between 0 and 1 represent fractions of the viewport height, and numbers greater than 1 are treated as pixel values. String values support `px` and `rem` units.
     snap_points: Sequence[str | float] | None
 
     # Current active snap point.
-    active_snap_point: Var[bool]
-
-    # Function to set the active snap point.
-    set_active_snap_point: EventHandler[passthrough_event_spec(int)]
-
-    # Index of a snap point from which the overlay fade should be applied. Defaults to the last snap point.
-    fade_from_index: Var[int]
+    snap_point: Var[str | float | None]
 
-    # Whether to snap to sequential points.
-    snap_to_sequential_point: Var[bool]
+    # Event handler called when the snap point changes.
+    on_snap_point_change: EventHandler[passthrough_event_spec(str | float | None)]
 
     @classmethod
-    def create(cls, *children, **props) -> Component:
+    def create(cls, *children, **props) -> BaseUIComponent:
         """Create the drawer root component.
 
         Returns:
@@ -94,18 +96,18 @@ def create(cls, *children, **props) -> Component:
 
 
 class DrawerTrigger(DrawerBaseComponent):
-    """The button that opens the drawer."""
+    """A button that opens the drawer. Renders a <button> element."""
 
     tag = "Drawer.Trigger"
 
-    # Render the trigger as a child. Defaults to False.
-    as_child: Var[bool]
+    # Whether the component renders a native <button> element when replacing it via the render prop.
+    native_button: Var[bool]
 
-    # The render prop
+    # The render prop.
     render_: Var[Component]
 
     @classmethod
-    def create(cls, *children, **props) -> Component:
+    def create(cls, *children, **props) -> BaseUIComponent:
         """Create the drawer trigger component.
 
         Returns:
@@ -117,12 +119,18 @@ def create(cls, *children, **props) -> Component:
 
 
 class DrawerPortal(DrawerBaseComponent):
-    """Portals your drawer into the body."""
+    """A portal element that moves the popup to a different part of the DOM. By default, the portal element is appended to <body>."""
 
     tag = "Drawer.Portal"
 
+    # A parent element to render the portal element into.
+    container: Var[str]
+
+    # Whether to keep the portal mounted in the DOM while the popup is hidden. Defaults to False.
+    keep_mounted: Var[bool]
+
     @classmethod
-    def create(cls, *children, **props) -> Component:
+    def create(cls, *children, **props) -> BaseUIComponent:
         """Create the drawer portal component.
 
         Returns:
@@ -133,76 +141,99 @@ def create(cls, *children, **props) -> Component:
         return super().create(*children, **props)
 
 
-class DrawerContent(DrawerBaseComponent):
-    """Content that should be rendered in the drawer."""
+class DrawerBackdrop(DrawerBaseComponent):
+    """An overlay displayed beneath the popup. Renders a <div> element."""
 
-    tag = "Drawer.Content"
+    tag = "Drawer.Backdrop"
+
+    # Whether the backdrop is forced to render even when nested. Defaults to False.
+    force_render: Var[bool]
 
-    # Render the content as a child. Defaults to False.
-    as_child: Var[bool]
+    # The render prop.
+    render_: Var[Component]
 
     @classmethod
-    def create(cls, *children, **props) -> Component:
-        """Create the drawer content component.
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the drawer backdrop component.
 
         Returns:
             The component.
         """
-        props["data-slot"] = "drawer-content"
-        cls.set_class_name(ClassNames.CONTENT, props)
+        props["data-slot"] = "drawer-backdrop"
+        cls.set_class_name(ClassNames.BACKDROP, props)
         return super().create(*children, **props)
 
 
-class DrawerOverlay(DrawerBaseComponent):
-    """A layer that covers the inert portion of the view when the drawer is open."""
-
-    tag = "Drawer.Overlay"
+class DrawerViewport(DrawerBaseComponent):
+    """A viewport container for the drawer popup. Renders a <div> element."""
 
-    # Render the overlay as a child. Defaults to False.
-    as_child: Var[bool]
+    tag = "Drawer.Viewport"
 
     @classmethod
-    def create(cls, *children, **props) -> Component:
-        """Create the drawer overlay component.
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the drawer viewport component.
 
         Returns:
             The component.
         """
-        props["data-slot"] = "drawer-overlay"
-        cls.set_class_name(ClassNames.OVERLAY, props)
+        props["data-slot"] = "drawer-viewport"
+        cls.set_class_name(ClassNames.VIEWPORT, props)
         return super().create(*children, **props)
 
 
-class DrawerClose(DrawerBaseComponent):
-    """A button that closes the drawer."""
+class DrawerPopup(DrawerBaseComponent):
+    """A container for the drawer contents. Renders a <div> element."""
 
-    tag = "Drawer.Close"
+    tag = "Drawer.Popup"
+
+    # Determines the element to focus when the drawer is opened. By default, the first focusable element is focused.
+    initial_focus: Var[str]
 
-    # Render the close button as a child. Defaults to False.
-    as_child: Var[bool]
+    # Determines the element to focus when the drawer is closed. By default, focus returns to the trigger.
+    final_focus: Var[str]
+
+    # The render prop.
+    render_: Var[Component]
 
     @classmethod
-    def create(cls, *children, **props) -> Component:
-        """Create the drawer close component.
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the drawer popup component.
 
         Returns:
             The component.
         """
-        props["data-slot"] = "drawer-close"
-        cls.set_class_name(ClassNames.CLOSE, props)
+        props["data-slot"] = "drawer-popup"
+        cls.set_class_name(ClassNames.POPUP, props)
+        return super().create(*children, **props)
+
+
+class DrawerContent(DrawerBaseComponent):
+    """Content within the drawer popup. Allows text selection without swipe interference."""
+
+    tag = "Drawer.Content"
+
+    @classmethod
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the drawer content component.
+
+        Returns:
+            The component.
+        """
+        props["data-slot"] = "drawer-content"
+        cls.set_class_name(ClassNames.CONTENT, props)
         return super().create(*children, **props)
 
 
 class DrawerTitle(DrawerBaseComponent):
-    """An optional accessible title to be announced when the drawer is opened."""
+    """A heading that labels the drawer. Renders an <h2> element."""
 
     tag = "Drawer.Title"
 
-    # Render the title as a child. Defaults to False.
-    as_child: Var[bool]
+    # The render prop.
+    render_: Var[Component]
 
     @classmethod
-    def create(cls, *children, **props) -> Component:
+    def create(cls, *children, **props) -> BaseUIComponent:
         """Create the drawer title component.
 
         Returns:
@@ -214,15 +245,15 @@ def create(cls, *children, **props) -> Component:
 
 
 class DrawerDescription(DrawerBaseComponent):
-    """An optional accessible description to be announced when the drawer is opened."""
+    """A paragraph with additional information about the drawer. Renders a <p> element."""
 
     tag = "Drawer.Description"
 
-    # Render the description as a child. Defaults to False.
-    as_child: Var[bool]
+    # The render prop.
+    render_: Var[Component]
 
     @classmethod
-    def create(cls, *children, **props) -> Component:
+    def create(cls, *children, **props) -> BaseUIComponent:
         """Create the drawer description component.
 
         Returns:
@@ -233,36 +264,114 @@ def create(cls, *children, **props) -> Component:
         return super().create(*children, **props)
 
 
-class DrawerHandle(DrawerBaseComponent):
-    """An optional handle to drag the drawer."""
+class DrawerClose(DrawerBaseComponent):
+    """A button that closes the drawer. Renders a <button> element."""
+
+    tag = "Drawer.Close"
+
+    # Whether the component renders a native <button> element when replacing it via the render prop.
+    native_button: Var[bool]
+
+    # The render prop.
+    render_: Var[Component]
+
+    @classmethod
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the drawer close component.
+
+        Returns:
+            The component.
+        """
+        props["data-slot"] = "drawer-close"
+        cls.set_class_name(ClassNames.CLOSE, props)
+        return super().create(*children, **props)
+
+
+class DrawerSwipeArea(DrawerBaseComponent):
+    """An area that responds to swipe gestures to dismiss the drawer."""
+
+    tag = "Drawer.SwipeArea"
+
+    @classmethod
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the drawer swipe area component.
+
+        Returns:
+            The component.
+        """
+        props["data-slot"] = "drawer-swipe-area"
+        cls.set_class_name(ClassNames.SWIPE_AREA, props)
+        return super().create(*children, **props)
+
 
-    tag = "Drawer.Handle"
+class DrawerProvider(DrawerBaseComponent):
+    """Provides shared context for nested drawers with indent effects."""
 
-    alias = "Vaul" + tag
+    tag = "Drawer.Provider"
 
     @classmethod
-    def create(cls, *children, **props) -> Component:
-        """Create the drawer handle component.
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the drawer provider component.
 
         Returns:
             The component.
         """
-        props["data-slot"] = "drawer-handle"
-        cls.set_class_name(ClassNames.HANDLE, props)
+        props["data-slot"] = "drawer-provider"
+        cls.set_class_name(ClassNames.PROVIDER, props)
+        return super().create(*children, **props)
+
+
+class DrawerIndentBackground(DrawerBaseComponent):
+    """Background element for the indent effect when nested drawers are open."""
+
+    tag = "Drawer.IndentBackground"
+
+    @classmethod
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the drawer indent background component.
+
+        Returns:
+            The component.
+        """
+        props["data-slot"] = "drawer-indent-background"
+        cls.set_class_name(ClassNames.INDENT_BACKGROUND, props)
+        return super().create(*children, **props)
+
+
+class DrawerIndent(DrawerBaseComponent):
+    """Container for the indent effect. Wraps the drawer root."""
+
+    tag = "Drawer.Indent"
+
+    @classmethod
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the drawer indent component.
+
+        Returns:
+            The component.
+        """
+        props["data-slot"] = "drawer-indent"
+        cls.set_class_name(ClassNames.INDENT, props)
         return super().create(*children, **props)
 
 
 class HighLevelDrawer(DrawerRoot):
     """High level wrapper for the Drawer component."""
 
-    # Drawer props
+    # The trigger component that opens the drawer.
     trigger: Var[Component | None]
+
+    # The content to display inside the drawer body.
     content: Var[str | Component | None]
+
+    # The title displayed in the drawer header.
     title: Var[str | Component | None]
+
+    # The description displayed below the drawer title.
     description: Var[str | Component | None]
 
     @classmethod
-    def create(cls, *children, **props) -> Component:
+    def create(cls, *children, **props) -> BaseUIComponent:
         """Create the high level drawer component.
 
         Returns:
@@ -272,20 +381,46 @@ def create(cls, *children, **props) -> Component:
         content = props.pop("content", None)
         title = props.pop("title", None)
         description = props.pop("description", None)
+        class_name = props.pop("class_name", "")
 
-        return super().create(
+        return DrawerRoot.create(
             DrawerTrigger.create(render_=trigger) if trigger is not None else None,
             DrawerPortal.create(
-                DrawerOverlay.create(),
-                DrawerContent.create(
-                    DrawerTitle.create(title) if title is not None else None,
-                    (
-                        DrawerDescription.create(description)
-                        if description is not None
-                        else None
+                DrawerBackdrop.create(),
+                DrawerViewport.create(
+                    DrawerPopup.create(
+                        Div.create(
+                            class_name=ClassNames.HANDLE,
+                        ),
+                        DrawerContent.create(
+                            Div.create(
+                                Div.create(
+                                    DrawerTitle.create(title)
+                                    if title is not None
+                                    else None,
+                                    DrawerClose.create(
+                                        render_=button(
+                                            hi("Cancel01Icon"),
+                                            variant="ghost",
+                                            size="icon-sm",
+                                            class_name="text-secondary-11",
+                                        ),
+                                    ),
+                                    class_name="flex flex-row justify-between items-baseline gap-1",
+                                ),
+                                (
+                                    DrawerDescription.create(description)
+                                    if description is not None
+                                    else None
+                                ),
+                                data_slot="drawer-header",
+                                class_name=ClassNames.HEADER,
+                            ),
+                            content,
+                            *children,
+                        ),
+                        class_name=class_name,
                     ),
-                    content,
-                    *children,
                 ),
             ),
             **props,
@@ -307,12 +442,17 @@ class Drawer(ComponentNamespace):
     root = staticmethod(DrawerRoot.create)
     trigger = staticmethod(DrawerTrigger.create)
     portal = staticmethod(DrawerPortal.create)
+    backdrop = staticmethod(DrawerBackdrop.create)
+    viewport = staticmethod(DrawerViewport.create)
+    popup = staticmethod(DrawerPopup.create)
     content = staticmethod(DrawerContent.create)
-    overlay = staticmethod(DrawerOverlay.create)
-    close = staticmethod(DrawerClose.create)
     title = staticmethod(DrawerTitle.create)
     description = staticmethod(DrawerDescription.create)
-    handle = staticmethod(DrawerHandle.create)
+    close = staticmethod(DrawerClose.create)
+    swipe_area = staticmethod(DrawerSwipeArea.create)
+    provider = staticmethod(DrawerProvider.create)
+    indent_background = staticmethod(DrawerIndentBackground.create)
+    indent = staticmethod(DrawerIndent.create)
     class_names = ClassNames
     __call__ = staticmethod(HighLevelDrawer.create)