UI·loomora/Accordion
Accordion
A locally controlled disclosure section with an accessible title trigger and animated content region.
Interactive live playground
Tweak props, change states, and see the live component respond in real time.
How to call
Import directly from the Loomora package root. For projects without Tailwind CSS, ensure loomora/dist/index.css is imported once in your root layout.
import { Accordion } from 'loomora'
<Accordion title="Account details" initialCollapsed>
<p>Content appears when the section is expanded.</p>
</Accordion>API reference
Important public props and how they affect rendering.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | — | Trigger title displayed at the top of the section. |
| children | ReactNode | required | Content revealed by expanding the section. |
| initialCollapsed | boolean | false | Initial collapsed state; component manages subsequent toggles locally. |
| setOpen | (collapsed: boolean) => void | — | Notifies when the title trigger toggles. |
| allTitleClickable | boolean | true | Makes the whole title area the disclosure button. |
| condition | boolean | true | Returns null when false. |