︲

︲

Collapsible

An interactive component which expands/collapses a panel.

Installation

Copy the following code into your app directory.

uv

uv run buridan add component collapsible
from components.ui.collapsible import collapsible

Anatomy

Use the following composition to build a Collapsible component.

collapsible.root( collapsible.trigger(), collapsible.panel(), )

Examples

High Level Demo

Uses the simplified collapsible() API with trigger and content props for quick implementation.

import reflex as rx
from components.ui.button import button
from components.ui.collapsible import collapsible


def collapsible_high_level_demo():
    return collapsible(
        trigger=button(
            "Trigger",
            varient="outline",
            class_name="w-full",
        ),
        content=rx.el.p(
            "This is the collapsible content. You can put anything here!",
            class_name="py-2 text-center",
        ),
        default_open=False,
        class_name="w-full max-w-xs",
    )

Low Level Demo

Uses the low-level collapsible.root(), collapsible.panel(), and ClientStateVar for full control over state and structure.

@radix-ui/primitives
import reflex as rx
from components.ui.button import button
from components.ui.collapsible import collapsible


def collapsible_low_level_demo():
    return collapsible.root(
        collapsible.trigger(
            button(
                "Collapsible Trigger",
                varient="outline",
                class_name="w-full",
            ),
        ),
        rx.el.div(
            "@radix-ui/primitives",
            class_name="rounded-md border border-input px-4 py-2 font-mono text-sm",
        ),
        collapsible.panel(
            rx.el.div(
                rx.el.div(
                    "@radix-ui/colors",
                    class_name="rounded-md border border-input px-4 py-2 font-mono text-sm",
                ),
                rx.el.div(
                    "@stitches/react",
                    class_name="rounded-md border border-input px-4 py-2 font-mono text-sm",
                ),
                class_name="flex flex-col gap-4",
            ),
        ),
        class_name="w-full max-w-xs flex flex-col gap-2",
    )