Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

❯buridan add accordion

Component Guide

Use the following to build the Accordion component.

from components.ui.accordion import accordion

accordion.root(
    accordion.item(
        accordion.header(
            accordion.trigger(),
        ),
        accordion.panel(),
    ),
    accordion.item(
        accordion.header(
            accordion.trigger(),
        ),
        accordion.panel(),
    ),
)

Source Code & Dependencies

For manual installation, copy each of the source codes below in their respective locations.

components/core/core.py

components/core/hugeicon.py

components/ui/accordion.py

Examples

Basic

Built on native <details>/<summary> — expand/collapse, keyboard support, and the chevron rotation all come from the browser and group-open/accordion-item:rotate-180, no JS required.

Props used: name on accordion.item (groups items so only one stays open at a time, matching native <details name="..."> behavior).

Models

- Genesis launched a new era of exploration.

- Explorer uncovered new planets beyond our reach.

- Voyager 1 ventured into interstellar space.

- Apollo landed humans on the Moon.

Spacecraft

- Curiosity sent back valuable data from Mars.

- The Hubble Telescope captured distant galaxies.

- James Webb will explore the universe's origins.

- The ISS orbits Earth, conducting critical experiments.

Space Discoveries

- Saturn's rings have fascinated scientists for years.

- The Mars Rover is studying the planet's surface.

- NASA's Artemis program aims to return humans to the Moon.

- Solar missions help us understand space weather.

import reflex as rx

from components.ui.accordion import accordion


def accordion_basic():
    return rx.el.div(
        accordion.root(
            accordion.item(
                accordion.trigger("Models"),
                accordion.panel(
                    rx.el.p("- Genesis launched a new era of exploration."),
                    rx.el.p("- Explorer uncovered new planets beyond our reach."),
                    rx.el.p("- Voyager 1 ventured into interstellar space."),
                    rx.el.p("- Apollo landed humans on the Moon."),
                ),
                name="single",
            ),
            accordion.item(
                accordion.trigger("Spacecraft"),
                accordion.panel(
                    rx.el.p("- Curiosity sent back valuable data from Mars."),
                    rx.el.p("- The Hubble Telescope captured distant galaxies."),
                    rx.el.p("- James Webb will explore the universe's origins."),
                    rx.el.p("- The ISS orbits Earth, conducting critical experiments."),
                ),
                open=True,
                name="single",
            ),
            accordion.item(
                accordion.trigger("Space Discoveries"),
                accordion.panel(
                    rx.el.p("- Saturn's rings have fascinated scientists for years."),
                    rx.el.p("- The Mars Rover is studying the planet's surface."),
                    rx.el.p(
                        "- NASA's Artemis program aims to return humans to the Moon."
                    ),
                    rx.el.p("- Solar missions help us understand space weather."),
                ),
                name="single",
            ),
            class_name="w-full max-w-md mx-auto",
        ),
        class_name="h-[45vh] w-full justify-center pt-10 px-8",
    )

API Reference

accordion.root

accordion.root(
    accordion.item(...),
    accordion.item(...),
)

Prop	Type	Default
`class_name`	`str`	`""`

accordion.item

Renders a native <details>. Give matching items the same name to make them mutually exclusive (native <details name="..."> grouping — opening one closes the others in the group automatically).

accordion.item(
    accordion.trigger("Is it accessible?"),
    accordion.panel("Yes, built on native semantics."),
    name="faq",
)

Prop	Type	Default
`name`	`str`
`class_name`	`str`	`""`

accordion.trigger

Renders a <summary> with a chevron icon appended automatically — no need to add one yourself.

accordion.trigger("Is it accessible?")

Prop	Type	Default
`class_name`	`str`	`""`

accordion.panel

accordion.panel("Yes. It adheres to the WAI-ARIA design pattern.")

Prop	Type	Default
`class_name`	`str`	`""`