diff --git a/reflex_ui/__init__.py b/reflex_ui/__init__.py
index cdd5a12..231af2a 100644
--- a/reflex_ui/__init__.py
+++ b/reflex_ui/__init__.py
@@ -11,6 +11,7 @@
     "components.base.checkbox": ["checkbox"],
     "components.base.collapsible": ["collapsible"],
     "components.base.dialog": ["dialog"],
+    "components.base.drawer": ["drawer"],
     "components.base.gradient_profile": ["gradient_profile"],
     "components.base.input": ["input"],
     "components.base.link": ["link"],
diff --git a/reflex_ui/__init__.pyi b/reflex_ui/__init__.pyi
index 701150e..309efb1 100644
--- a/reflex_ui/__init__.pyi
+++ b/reflex_ui/__init__.pyi
@@ -13,6 +13,7 @@ from .components.base.card import card
 from .components.base.checkbox import checkbox
 from .components.base.collapsible import collapsible
 from .components.base.dialog import dialog
+from .components.base.drawer import drawer
 from .components.base.gradient_profile import gradient_profile
 from .components.base.input import input
 from .components.base.link import link
@@ -44,6 +45,7 @@ _REFLEX_UI_MAPPING = {
     "components.base.checkbox": ["checkbox"],
     "components.base.collapsible": ["collapsible"],
     "components.base.dialog": ["dialog"],
+    "components.base.drawer": ["drawer"],
     "components.base.gradient_profile": ["gradient_profile"],
     "components.base.input": ["input"],
     "components.base.link": ["link"],
@@ -84,6 +86,7 @@ __all__ = [
     "collapsible",
     "components",
     "dialog",
+    "drawer",
     "gradient_profile",
     "hi",
     "icon",
diff --git a/reflex_ui/components/base/__init__.pyi b/reflex_ui/components/base/__init__.pyi
index 6f2e77d..1bdf0c8 100644
--- a/reflex_ui/components/base/__init__.pyi
+++ b/reflex_ui/components/base/__init__.pyi
@@ -13,6 +13,7 @@ from .card import card
 from .checkbox import checkbox
 from .collapsible import collapsible
 from .dialog import dialog
+from .drawer import drawer
 from .gradient_profile import gradient_profile
 from .input import input
 from .link import link
@@ -46,6 +47,7 @@ __all__ = [
     "checkbox",
     "collapsible",
     "dialog",
+    "drawer",
     "gradient_profile",
     "input",
     "link",
diff --git a/reflex_ui/components/base/drawer.py b/reflex_ui/components/base/drawer.py
new file mode 100644
index 0000000..dfb0c18
--- /dev/null
+++ b/reflex_ui/components/base/drawer.py
@@ -0,0 +1,276 @@
+"""Custom drawer component."""
+
+from collections.abc import Sequence
+from typing import Literal
+
+from reflex.components.component import Component, ComponentNamespace
+from reflex.event import EventHandler, passthrough_event_spec
+from reflex.vars.base import Var
+
+from reflex_ui.components.component import CoreComponent
+
+LiteralDirectionType = Literal["top", "bottom", "left", "right"]
+
+
+class ClassNames:
+    """Class names for the drawer component."""
+
+    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 = ""
+    TITLE = "text-2xl font-semibold text-secondary-12"
+    DESCRIPTION = "text-sm text-secondary-11"
+    HANDLE = ""
+
+
+class DrawerBaseComponent(CoreComponent):
+    """Base component for drawer components."""
+
+    library = "vaul-base@0.0.5"
+
+
+class DrawerRoot(DrawerBaseComponent):
+    """The Root component of a Drawer, contains all parts of a drawer."""
+
+    tag = "Drawer.Root"
+
+    # 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.
+    open: Var[bool]
+
+    # Fires when the drawer is opened or closed.
+    on_open_change: EventHandler[passthrough_event_spec(bool)]
+
+    # When False, it allows interaction with elements outside of the drawer without closing it. Defaults to True.
+    modal: Var[bool]
+
+    # Direction of the drawer. This adjusts the animations and the drag direction. Defaults to "bottom"
+    direction: Var[LiteralDirectionType]
+
+    # 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)]
+
+    # 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]
+
+    # 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.
+    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]
+
+    # Whether to snap to sequential points.
+    snap_to_sequential_point: Var[bool]
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the drawer root component."""
+        props["data-slot"] = "drawer-root"
+        cls.set_class_name(ClassNames.ROOT, props)
+        return super().create(*children, **props)
+
+
+class DrawerTrigger(DrawerBaseComponent):
+    """The button that opens the drawer."""
+
+    tag = "Drawer.Trigger"
+
+    # Render the trigger 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 trigger component."""
+        props["data-slot"] = "drawer-trigger"
+        cls.set_class_name(ClassNames.TRIGGER, props)
+        return super().create(*children, **props)
+
+
+class DrawerPortal(DrawerBaseComponent):
+    """Portals your drawer into the body."""
+
+    tag = "Drawer.Portal"
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the drawer portal component."""
+        props["data-slot"] = "drawer-portal"
+        cls.set_class_name(ClassNames.PORTAL, props)
+        return super().create(*children, **props)
+
+
+class DrawerContent(DrawerBaseComponent):
+    """Content that should be rendered in the drawer."""
+
+    tag = "Drawer.Content"
+
+    # Render the content as a child. Defaults to False.
+    as_child: Var[bool]
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the drawer content component."""
+        props["data-slot"] = "drawer-content"
+        cls.set_class_name(ClassNames.CONTENT, 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"
+
+    # Render the overlay as a child. Defaults to False.
+    as_child: Var[bool]
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the drawer overlay component."""
+        props["data-slot"] = "drawer-overlay"
+        cls.set_class_name(ClassNames.OVERLAY, props)
+        return super().create(*children, **props)
+
+
+class DrawerClose(DrawerBaseComponent):
+    """A button that closes the drawer."""
+
+    tag = "Drawer.Close"
+
+    # Render the close button as a child. Defaults to False.
+    as_child: Var[bool]
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the drawer close component."""
+        props["data-slot"] = "drawer-close"
+        cls.set_class_name(ClassNames.CLOSE, props)
+        return super().create(*children, **props)
+
+
+class DrawerTitle(DrawerBaseComponent):
+    """An optional accessible title to be announced when the drawer is opened."""
+
+    tag = "Drawer.Title"
+
+    # Render the title as a child. Defaults to False.
+    as_child: Var[bool]
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the drawer title component."""
+        props["data-slot"] = "drawer-title"
+        cls.set_class_name(ClassNames.TITLE, props)
+        return super().create(*children, **props)
+
+
+class DrawerDescription(DrawerBaseComponent):
+    """An optional accessible description to be announced when the drawer is opened."""
+
+    tag = "Drawer.Description"
+
+    # Render the description as a child. Defaults to False.
+    as_child: Var[bool]
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the drawer description component."""
+        props["data-slot"] = "drawer-description"
+        cls.set_class_name(ClassNames.DESCRIPTION, props)
+        return super().create(*children, **props)
+
+
+class DrawerHandle(DrawerBaseComponent):
+    """An optional handle to drag the drawer."""
+
+    tag = "Drawer.Handle"
+
+    alias = "Vaul" + tag
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the drawer handle component."""
+        props["data-slot"] = "drawer-handle"
+        cls.set_class_name(ClassNames.HANDLE, props)
+        return super().create(*children, **props)
+
+
+class HighLevelDrawer(DrawerRoot):
+    """High level wrapper for the Drawer component."""
+
+    # Drawer props
+    trigger: Var[Component | None]
+    content: Var[str | Component | None]
+    title: Var[str | Component | None]
+    description: Var[str | Component | None]
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the high level drawer component."""
+        trigger = props.get("trigger")
+        content = props.get("content")
+        title = props.get("title")
+        description = props.get("description")
+
+        return super().create(
+            DrawerTrigger.create(render_=trigger) if trigger else None,
+            DrawerPortal.create(
+                DrawerOverlay.create(),
+                DrawerContent.create(
+                    DrawerTitle.create(title) if title else None,
+                    DrawerDescription.create(description) if description else None,
+                    content,
+                    *children,
+                ),
+            ),
+            **props,
+        )
+
+    def _exclude_props(self) -> list[str]:
+        return [
+            *super()._exclude_props(),
+            "trigger",
+            "content",
+            "title",
+            "description",
+        ]
+
+
+class Drawer(ComponentNamespace):
+    """A namespace for Drawer components."""
+
+    root = staticmethod(DrawerRoot.create)
+    trigger = staticmethod(DrawerTrigger.create)
+    portal = staticmethod(DrawerPortal.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)
+    __call__ = staticmethod(HighLevelDrawer.create)
+
+
+drawer = Drawer()
diff --git a/reflex_ui/components/base/drawer.pyi b/reflex_ui/components/base/drawer.pyi
new file mode 100644
index 0000000..0b6c044
--- /dev/null
+++ b/reflex_ui/components/base/drawer.pyi
@@ -0,0 +1,564 @@
+"""Stub file for reflex_ui/components/base/drawer.py"""
+
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `reflex/utils/pyi_generator.py`!
+# ------------------------------------------------------
+from collections.abc import Mapping, Sequence
+from typing import Any, Literal
+
+from reflex.components.component import Component, ComponentNamespace
+from reflex.components.core.breakpoints import Breakpoints
+from reflex.event import EventType, PointerEventInfo
+from reflex.vars.base import Var
+
+from reflex_ui.components.component import CoreComponent
+
+LiteralDirectionType = Literal["top", "bottom", "left", "right"]
+
+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 = ""
+    TITLE = "text-2xl font-semibold text-secondary-12"
+    DESCRIPTION = "text-sm text-secondary-11"
+    HANDLE = ""
+
+class DrawerBaseComponent(CoreComponent):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        unstyled: Var[bool] | bool | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_blur: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_focus: EventType[()] | None = None,
+        on_mount: EventType[()] | None = None,
+        on_mouse_down: EventType[()] | None = None,
+        on_mouse_enter: EventType[()] | None = None,
+        on_mouse_leave: EventType[()] | None = None,
+        on_mouse_move: EventType[()] | None = None,
+        on_mouse_out: EventType[()] | None = None,
+        on_mouse_over: EventType[()] | None = None,
+        on_mouse_up: EventType[()] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        **props,
+    ) -> DrawerBaseComponent:
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            unstyled: Whether the component should be unstyled
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            ref: The Var to pass as the ref to the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The props of the component.
+
+        Returns:
+            The component.
+        """
+
+class DrawerRoot(DrawerBaseComponent):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        default_open: Var[bool] | bool | None = None,
+        open: Var[bool] | bool | None = None,
+        modal: Var[bool] | bool | None = None,
+        direction: Literal["bottom", "left", "right", "top"]
+        | Var[Literal["bottom", "left", "right", "top"]]
+        | None = None,
+        dismissible: Var[bool] | bool | None = None,
+        handle_only: Var[bool] | bool | None = None,
+        container: Var[str] | str | None = None,
+        reposition_inputs: Var[bool] | bool | None = None,
+        snap_points: Sequence[float | str] | None = None,
+        active_snap_point: Var[bool] | bool | None = None,
+        fade_from_index: Var[int] | int | None = None,
+        snap_to_sequential_point: Var[bool] | bool | None = None,
+        unstyled: Var[bool] | bool | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_animation_end: EventType[()] | EventType[bool] | None = None,
+        on_blur: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_focus: EventType[()] | None = None,
+        on_mount: EventType[()] | None = None,
+        on_mouse_down: EventType[()] | None = None,
+        on_mouse_enter: EventType[()] | None = None,
+        on_mouse_leave: EventType[()] | None = None,
+        on_mouse_move: EventType[()] | None = None,
+        on_mouse_out: EventType[()] | None = None,
+        on_mouse_over: EventType[()] | None = None,
+        on_mouse_up: EventType[()] | None = None,
+        on_open_change: EventType[()] | EventType[bool] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        set_active_snap_point: EventType[()] | EventType[int] | None = None,
+        **props,
+    ) -> DrawerRoot:
+        """Create the drawer root component."""
+
+class DrawerTrigger(DrawerBaseComponent):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        as_child: Var[bool] | bool | None = None,
+        render_: Component | Var[Component] | None = None,
+        unstyled: Var[bool] | bool | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_blur: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_focus: EventType[()] | None = None,
+        on_mount: EventType[()] | None = None,
+        on_mouse_down: EventType[()] | None = None,
+        on_mouse_enter: EventType[()] | None = None,
+        on_mouse_leave: EventType[()] | None = None,
+        on_mouse_move: EventType[()] | None = None,
+        on_mouse_out: EventType[()] | None = None,
+        on_mouse_over: EventType[()] | None = None,
+        on_mouse_up: EventType[()] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        **props,
+    ) -> DrawerTrigger:
+        """Create the drawer trigger component."""
+
+class DrawerPortal(DrawerBaseComponent):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        unstyled: Var[bool] | bool | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_blur: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_focus: EventType[()] | None = None,
+        on_mount: EventType[()] | None = None,
+        on_mouse_down: EventType[()] | None = None,
+        on_mouse_enter: EventType[()] | None = None,
+        on_mouse_leave: EventType[()] | None = None,
+        on_mouse_move: EventType[()] | None = None,
+        on_mouse_out: EventType[()] | None = None,
+        on_mouse_over: EventType[()] | None = None,
+        on_mouse_up: EventType[()] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        **props,
+    ) -> DrawerPortal:
+        """Create the drawer portal component."""
+
+class DrawerContent(DrawerBaseComponent):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        as_child: Var[bool] | bool | None = None,
+        unstyled: Var[bool] | bool | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_blur: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_focus: EventType[()] | None = None,
+        on_mount: EventType[()] | None = None,
+        on_mouse_down: EventType[()] | None = None,
+        on_mouse_enter: EventType[()] | None = None,
+        on_mouse_leave: EventType[()] | None = None,
+        on_mouse_move: EventType[()] | None = None,
+        on_mouse_out: EventType[()] | None = None,
+        on_mouse_over: EventType[()] | None = None,
+        on_mouse_up: EventType[()] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        **props,
+    ) -> DrawerContent:
+        """Create the drawer content component."""
+
+class DrawerOverlay(DrawerBaseComponent):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        as_child: Var[bool] | bool | None = None,
+        unstyled: Var[bool] | bool | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_blur: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_focus: EventType[()] | None = None,
+        on_mount: EventType[()] | None = None,
+        on_mouse_down: EventType[()] | None = None,
+        on_mouse_enter: EventType[()] | None = None,
+        on_mouse_leave: EventType[()] | None = None,
+        on_mouse_move: EventType[()] | None = None,
+        on_mouse_out: EventType[()] | None = None,
+        on_mouse_over: EventType[()] | None = None,
+        on_mouse_up: EventType[()] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        **props,
+    ) -> DrawerOverlay:
+        """Create the drawer overlay component."""
+
+class DrawerClose(DrawerBaseComponent):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        as_child: Var[bool] | bool | None = None,
+        unstyled: Var[bool] | bool | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_blur: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_focus: EventType[()] | None = None,
+        on_mount: EventType[()] | None = None,
+        on_mouse_down: EventType[()] | None = None,
+        on_mouse_enter: EventType[()] | None = None,
+        on_mouse_leave: EventType[()] | None = None,
+        on_mouse_move: EventType[()] | None = None,
+        on_mouse_out: EventType[()] | None = None,
+        on_mouse_over: EventType[()] | None = None,
+        on_mouse_up: EventType[()] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        **props,
+    ) -> DrawerClose:
+        """Create the drawer close component."""
+
+class DrawerTitle(DrawerBaseComponent):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        as_child: Var[bool] | bool | None = None,
+        unstyled: Var[bool] | bool | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_blur: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_focus: EventType[()] | None = None,
+        on_mount: EventType[()] | None = None,
+        on_mouse_down: EventType[()] | None = None,
+        on_mouse_enter: EventType[()] | None = None,
+        on_mouse_leave: EventType[()] | None = None,
+        on_mouse_move: EventType[()] | None = None,
+        on_mouse_out: EventType[()] | None = None,
+        on_mouse_over: EventType[()] | None = None,
+        on_mouse_up: EventType[()] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        **props,
+    ) -> DrawerTitle:
+        """Create the drawer title component."""
+
+class DrawerDescription(DrawerBaseComponent):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        as_child: Var[bool] | bool | None = None,
+        unstyled: Var[bool] | bool | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_blur: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_focus: EventType[()] | None = None,
+        on_mount: EventType[()] | None = None,
+        on_mouse_down: EventType[()] | None = None,
+        on_mouse_enter: EventType[()] | None = None,
+        on_mouse_leave: EventType[()] | None = None,
+        on_mouse_move: EventType[()] | None = None,
+        on_mouse_out: EventType[()] | None = None,
+        on_mouse_over: EventType[()] | None = None,
+        on_mouse_up: EventType[()] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        **props,
+    ) -> DrawerDescription:
+        """Create the drawer description component."""
+
+class DrawerHandle(DrawerBaseComponent):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        unstyled: Var[bool] | bool | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_blur: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_focus: EventType[()] | None = None,
+        on_mount: EventType[()] | None = None,
+        on_mouse_down: EventType[()] | None = None,
+        on_mouse_enter: EventType[()] | None = None,
+        on_mouse_leave: EventType[()] | None = None,
+        on_mouse_move: EventType[()] | None = None,
+        on_mouse_out: EventType[()] | None = None,
+        on_mouse_over: EventType[()] | None = None,
+        on_mouse_up: EventType[()] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        **props,
+    ) -> DrawerHandle:
+        """Create the drawer handle component."""
+
+class HighLevelDrawer(DrawerRoot):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        trigger: Component | Var[Component | None] | None = None,
+        content: Component | Var[Component | str | None] | str | None = None,
+        title: Component | Var[Component | str | None] | str | None = None,
+        description: Component | Var[Component | str | None] | str | None = None,
+        default_open: Var[bool] | bool | None = None,
+        open: Var[bool] | bool | None = None,
+        modal: Var[bool] | bool | None = None,
+        direction: Literal["bottom", "left", "right", "top"]
+        | Var[Literal["bottom", "left", "right", "top"]]
+        | None = None,
+        dismissible: Var[bool] | bool | None = None,
+        handle_only: Var[bool] | bool | None = None,
+        container: Var[str] | str | None = None,
+        reposition_inputs: Var[bool] | bool | None = None,
+        snap_points: Sequence[float | str] | None = None,
+        active_snap_point: Var[bool] | bool | None = None,
+        fade_from_index: Var[int] | int | None = None,
+        snap_to_sequential_point: Var[bool] | bool | None = None,
+        unstyled: Var[bool] | bool | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_animation_end: EventType[()] | EventType[bool] | None = None,
+        on_blur: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_focus: EventType[()] | None = None,
+        on_mount: EventType[()] | None = None,
+        on_mouse_down: EventType[()] | None = None,
+        on_mouse_enter: EventType[()] | None = None,
+        on_mouse_leave: EventType[()] | None = None,
+        on_mouse_move: EventType[()] | None = None,
+        on_mouse_out: EventType[()] | None = None,
+        on_mouse_over: EventType[()] | None = None,
+        on_mouse_up: EventType[()] | None = None,
+        on_open_change: EventType[()] | EventType[bool] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        set_active_snap_point: EventType[()] | EventType[int] | None = None,
+        **props,
+    ) -> HighLevelDrawer:
+        """Create the high level drawer component."""
+
+class Drawer(ComponentNamespace):
+    root = staticmethod(DrawerRoot.create)
+    trigger = staticmethod(DrawerTrigger.create)
+    portal = staticmethod(DrawerPortal.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)
+
+    @staticmethod
+    def __call__(
+        *children,
+        trigger: Component | Var[Component | None] | None = None,
+        content: Component | Var[Component | str | None] | str | None = None,
+        title: Component | Var[Component | str | None] | str | None = None,
+        description: Component | Var[Component | str | None] | str | None = None,
+        default_open: Var[bool] | bool | None = None,
+        open: Var[bool] | bool | None = None,
+        modal: Var[bool] | bool | None = None,
+        direction: Literal["bottom", "left", "right", "top"]
+        | Var[Literal["bottom", "left", "right", "top"]]
+        | None = None,
+        dismissible: Var[bool] | bool | None = None,
+        handle_only: Var[bool] | bool | None = None,
+        container: Var[str] | str | None = None,
+        reposition_inputs: Var[bool] | bool | None = None,
+        snap_points: Sequence[float | str] | None = None,
+        active_snap_point: Var[bool] | bool | None = None,
+        fade_from_index: Var[int] | int | None = None,
+        snap_to_sequential_point: Var[bool] | bool | None = None,
+        unstyled: Var[bool] | bool | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_animation_end: EventType[()] | EventType[bool] | None = None,
+        on_blur: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_focus: EventType[()] | None = None,
+        on_mount: EventType[()] | None = None,
+        on_mouse_down: EventType[()] | None = None,
+        on_mouse_enter: EventType[()] | None = None,
+        on_mouse_leave: EventType[()] | None = None,
+        on_mouse_move: EventType[()] | None = None,
+        on_mouse_out: EventType[()] | None = None,
+        on_mouse_over: EventType[()] | None = None,
+        on_mouse_up: EventType[()] | None = None,
+        on_open_change: EventType[()] | EventType[bool] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        set_active_snap_point: EventType[()] | EventType[int] | None = None,
+        **props,
+    ) -> HighLevelDrawer:
+        """Create the high level drawer component."""
+
+drawer = Drawer()