marigold-ui/marigold_2026

Panel

Basic

renders a labelled region with the Title as accessible name

Title Only Without Header

labels the panel region when Title is used without Panel.Header

With Header Actions

Slots Button Group

renders as a toolbar inside the actions grid cell

cycles focus between actions with arrow keys

individual Buttons inside the group do NOT carry the actions grid-area

With Collapsible

toggles aria-expanded and body visibility via click, Enter, and Space

morph caret reflects the expanded state

Controlled Collapsible

flips aria-expanded via the controlled `expanded` prop

Aria Labeled

Collapsible Default Expanded

starts expanded and wires aria-describedby to the description

Collapsible Bleed

Collapsible Disabled

Variants

Table Inside

Table Edge Alignment

only a bled table takes its edge padding from the Panel

Accordion Inside

Custom Padding

Chromatic publishes Storybook to streamline collaboration

Learn more Sign in