diff --git a/reflex_ui/__init__.py b/reflex_ui/__init__.py
index 68efa4f..f830f4f 100644
--- a/reflex_ui/__init__.py
+++ b/reflex_ui/__init__.py
@@ -8,6 +8,7 @@
     "components.base.button": ["button"],
     "components.base.card": ["card"],
     "components.base.checkbox": ["checkbox"],
+    "components.base.collapsible": ["collapsible"],
     "components.base.dialog": ["dialog"],
     "components.base.gradient_profile": ["gradient_profile"],
     "components.base.input": ["input"],
diff --git a/reflex_ui/__init__.pyi b/reflex_ui/__init__.pyi
index 8507311..9db5ab3 100644
--- a/reflex_ui/__init__.pyi
+++ b/reflex_ui/__init__.pyi
@@ -10,6 +10,7 @@ from .components.base.badge import badge
 from .components.base.button import button
 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.gradient_profile import gradient_profile
 from .components.base.input import input
@@ -39,6 +40,7 @@ _REFLEX_UI_MAPPING = {
     "components.base.button": ["button"],
     "components.base.card": ["card"],
     "components.base.checkbox": ["checkbox"],
+    "components.base.collapsible": ["collapsible"],
     "components.base.dialog": ["dialog"],
     "components.base.gradient_profile": ["gradient_profile"],
     "components.base.input": ["input"],
@@ -76,6 +78,7 @@ __all__ = [
     "card",
     "checkbox",
     "cn",
+    "collapsible",
     "components",
     "dialog",
     "gradient_profile",
diff --git a/reflex_ui/components/base/__init__.pyi b/reflex_ui/components/base/__init__.pyi
index 1049ddf..a87ba93 100644
--- a/reflex_ui/components/base/__init__.pyi
+++ b/reflex_ui/components/base/__init__.pyi
@@ -10,6 +10,7 @@ from .badge import badge
 from .button import button
 from .card import card
 from .checkbox import checkbox
+from .collapsible import collapsible
 from .dialog import dialog
 from .gradient_profile import gradient_profile
 from .input import input
@@ -41,6 +42,7 @@ __all__ = [
     "button",
     "card",
     "checkbox",
+    "collapsible",
     "dialog",
     "gradient_profile",
     "input",
diff --git a/reflex_ui/components/base/collapsible.py b/reflex_ui/components/base/collapsible.py
new file mode 100644
index 0000000..ba7f452
--- /dev/null
+++ b/reflex_ui/components/base/collapsible.py
@@ -0,0 +1,140 @@
+"""Custom collapsible component."""
+
+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_ui.components.base_ui import PACKAGE_NAME, BaseUIComponent
+
+
+class ClassNames:
+    """Class names for collapsible components."""
+
+    ROOT = "flex flex-col justify-center text-secondary-12"
+    TRIGGER = "group flex items-center gap-2"
+    PANEL = "flex h-[var(--collapsible-panel-height)] flex-col justify-end overflow-hidden text-sm transition-all ease-out data-[ending-style]:h-0 data-[starting-style]:h-0"
+
+
+class CollapsibleBaseComponent(BaseUIComponent):
+    """Base component for collapsible components."""
+
+    library = f"{PACKAGE_NAME}/collapsible"
+
+    @property
+    def import_var(self):
+        """Return the import variable for the collapsible component."""
+        return ImportVar(tag="Collapsible", package_path="", install=False)
+
+
+class CollapsibleRoot(CollapsibleBaseComponent):
+    """Groups all parts of the collapsible. Renders a <div> element."""
+
+    tag = "Collapsible.Root"
+
+    # Whether the collapsible panel is initially open. To render a controlled collapsible, use the `open` prop instead. Defaults to False.
+    default_open: Var[bool]
+
+    # Whether the collapsible panel is currently open. To render an uncontrolled collapsible, use the `default_open` prop instead.
+    open: Var[bool]
+
+    # Event handler called when the panel is opened or closed.
+    on_open_change: EventHandler[passthrough_event_spec(bool)]
+
+    # Whether the component should ignore user interaction. Defaults to False.
+    disabled: Var[bool]
+
+    # The render prop.
+    render_: Var[Component]
+
+    @classmethod
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the collapsible root component."""
+        props["data-slot"] = "collapsible"
+        cls.set_class_name(ClassNames.ROOT, props)
+        return super().create(*children, **props)
+
+
+class CollapsibleTrigger(CollapsibleBaseComponent):
+    """A button that opens and closes the collapsible panel. Renders a <button> element."""
+
+    tag = "Collapsible.Trigger"
+
+    # Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (e.g. `<div>`). Defaults to True.
+    native_button: Var[bool]
+
+    # The render prop.
+    render_: Var[Component]
+
+    @classmethod
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the collapsible trigger component."""
+        props["data-slot"] = "collapsible-trigger"
+        cls.set_class_name(ClassNames.TRIGGER, props)
+        return super().create(*children, **props)
+
+
+class CollapsiblePanel(CollapsibleBaseComponent):
+    """A panel with the collapsible contents. Renders a <div> element."""
+
+    tag = "Collapsible.Panel"
+
+    # Allows the browser's built-in page search to find and expand the panel contents. Overrides the `keep_mounted` prop and uses `hidden="until-found"` to hide the element without removing it from the DOM. Defaults to False.
+    hidden_until_found: Var[bool]
+
+    # Whether to keep the element in the DOM while the panel is hidden. This prop is ignored when `hidden_until_found` is used. Defaults to False.
+    keep_mounted: Var[bool]
+
+    # Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
+    render_: Var[Component]
+
+    @classmethod
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the collapsible panel component."""
+        props["data-slot"] = "collapsible-panel"
+        cls.set_class_name(ClassNames.PANEL, props)
+        return super().create(*children, **props)
+
+
+class HighLevelCollapsible(CollapsibleRoot):
+    """High level collapsible component."""
+
+    # The trigger component.
+    trigger: Var[Component | None]
+
+    # The content component.
+    content: Var[str | Component | None]
+
+    @classmethod
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the collapsible component."""
+        trigger = props.pop("trigger", None)
+        content = props.pop("content", None)
+
+        return CollapsibleRoot.create(
+            CollapsibleTrigger.create(render_=trigger) if trigger else None,
+            CollapsiblePanel.create(
+                content,
+                *children,
+            ),
+            **props,
+        )
+
+    def _exclude_props(self) -> list[str]:
+        return [
+            *super()._exclude_props(),
+            "trigger",
+            "content",
+        ]
+
+
+class Collapsible(ComponentNamespace):
+    """Namespace for Collapsible components."""
+
+    root = staticmethod(CollapsibleRoot.create)
+    trigger = staticmethod(CollapsibleTrigger.create)
+    panel = staticmethod(CollapsiblePanel.create)
+    __call__ = staticmethod(HighLevelCollapsible.create)
+
+
+collapsible = Collapsible()
diff --git a/reflex_ui/components/base/collapsible.pyi b/reflex_ui/components/base/collapsible.pyi
new file mode 100644
index 0000000..9674454
--- /dev/null
+++ b/reflex_ui/components/base/collapsible.pyi
@@ -0,0 +1,288 @@
+"""Stub file for reflex_ui/components/base/collapsible.py"""
+
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `reflex/utils/pyi_generator.py`!
+# ------------------------------------------------------
+from collections.abc import Mapping, Sequence
+from typing import Any
+
+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.base_ui import BaseUIComponent
+
+class ClassNames:
+    ROOT = "flex flex-col justify-center text-secondary-12"
+    TRIGGER = "group flex items-center gap-2"
+    PANEL = "flex h-[var(--collapsible-panel-height)] flex-col justify-end overflow-hidden text-sm transition-all ease-out data-[ending-style]:h-0 data-[starting-style]:h-0"
+
+class CollapsibleBaseComponent(BaseUIComponent):
+    @property
+    def import_var(self): ...
+    @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,
+    ) -> CollapsibleBaseComponent:
+        """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 CollapsibleRoot(CollapsibleBaseComponent):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        default_open: Var[bool] | bool | None = None,
+        open: Var[bool] | bool | None = None,
+        disabled: 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_open_change: EventType[()] | EventType[bool] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        **props,
+    ) -> CollapsibleRoot:
+        """Create the collapsible root component."""
+
+class CollapsibleTrigger(CollapsibleBaseComponent):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        native_button: 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,
+    ) -> CollapsibleTrigger:
+        """Create the collapsible trigger component."""
+
+class CollapsiblePanel(CollapsibleBaseComponent):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        hidden_until_found: Var[bool] | bool | None = None,
+        keep_mounted: 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,
+    ) -> CollapsiblePanel:
+        """Create the collapsible panel component."""
+
+class HighLevelCollapsible(CollapsibleRoot):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        trigger: Component | Var[Component | None] | None = None,
+        content: Component | Var[Component | str | None] | str | None = None,
+        default_open: Var[bool] | bool | None = None,
+        open: Var[bool] | bool | None = None,
+        disabled: 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_open_change: EventType[()] | EventType[bool] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        **props,
+    ) -> HighLevelCollapsible:
+        """Create the collapsible component."""
+
+class Collapsible(ComponentNamespace):
+    root = staticmethod(CollapsibleRoot.create)
+    trigger = staticmethod(CollapsibleTrigger.create)
+    panel = staticmethod(CollapsiblePanel.create)
+
+    @staticmethod
+    def __call__(
+        *children,
+        trigger: Component | Var[Component | None] | None = None,
+        content: Component | Var[Component | str | None] | str | None = None,
+        default_open: Var[bool] | bool | None = None,
+        open: Var[bool] | bool | None = None,
+        disabled: 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_open_change: EventType[()] | EventType[bool] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        **props,
+    ) -> HighLevelCollapsible:
+        """Create the collapsible component."""
+
+collapsible = Collapsible()