Accordion
Use an accordion to organise secondary or supplemental content in dense interfaces — configuration panels, filter options, detailed metadata that only some readers need. It keeps the surface clean without removing functionality.
Avoid it for critical information or actions. If someone needs to see something to complete a task, don't put it behind a click.
The live page's slug is misspelled
accordian; the inventory join patches it. The file here uses the code's spelling. Everything else on that page was the generic template and has been dropped — the two rules above are all it carried.
Where it exists
ui-accordion--default (open it in Storybook). One of 4 stories. Drag the bottom edge to resize. ⚠️ The frame renders the component at the frame's own width, so in a narrow pane you are seeing a narrow rendering rather than the canonical one.| axis | value |
|---|---|
| React module | yes — shared UI library |
| React tier | library |
| CSS class | none |
| CSS files | none |
| Storybook | yes |
| Figma | not mapped |
| Uses in product | 0 |
| Uses in admin | 0 |
| Seen as | never instantiated |
| Join provenance | none |
An empty cell above is a measurement, not an omission: every axis is printed whether or not it is populated. What each one costs is on /gaps.md, linked from the axis name wherever this page has a gap.
Members
A member is attached to its parent at module scope, so it is imported through the parent and versioned with it. Members have no page of their own: they declare no CSS class, carry no story and join no Figma set, and their uses are counted against the parent rather than separately.
None. Nothing is attached to this component as a member.