Accordion

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

Installation

Command to install the Accordion component.

buridan add accordion

uv run buridan add accordion

python -m buridan add accordion

Component Guide

Use the following to build the Accordion component.

from components.ui.accordion import accordion

accordion.root(
    accordion.item(
        accordion.trigger(),
        accordion.panel(),
    ),
    accordion.item(
        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`	`""`

External Tools

︲

On This Page