Accordion component
Accordion
Single-open, multiple-open, and headless accordion variants.
Single Open
Only one item can be open at a time (shared name).
How does single-open behavior work?
Give sibling items the same name attribute to let the browser keep only one item open at a time.
Do I need JavaScript?
No. The component uses native details/summary elements.
Can I place rich markup inside?
Yes. Content panels can contain forms, lists, cards, or any HEEx markup.
Multiple Open
All items can be open simultaneously (no shared name).
Notifications
Configure email digests, product announcements, and incident alerts.
Privacy
Review audit logs, active sessions, and workspace access policies.
Billing
Update payment methods, manage invoices, and compare plan limits.
Headless / Unstyled
Use variant=unstyled to bring your own design.
Custom styled item Open
PUI keeps the semantic structure while you control spacing, borders, colors, and decorative UI details yourself.