Intentwise Primitives

Panels & Accordions

Expandable panels and accordions for recommendations and collapsible content. CollapsiblePanel supports controlled/uncontrolled state and optional localStorage persistence; RecommendationAccordion displays a list of recommendation items with optional delete actions.

CollapsiblePanel (default expanded)

Panel with title and body. Click the header to collapse or expand.

Filters

Place filter controls or any content here. The panel can be collapsed to save space.
Show code
<CollapsiblePanel title="Filters" defaultExpanded={true}>
  <div className="p-4">Panel content here.</div>
</CollapsiblePanel>

CollapsiblePanel with header actions

Use headerActions to add buttons or summary text to the right of the title.

Show code
<CollapsiblePanel
  title="Advanced options"
  headerActions={<span className="text-xs text-iw-text-muted">3 selected</span>}
>
  ...
</CollapsiblePanel>

RecommendationAccordion

Recommendation list

Accordion showing recommendation items with count, description (supports **bold**), and date. Optional onItemDelete callback for remove actions.

12
Sponsored Product keyword bids
07th Mar
5
Sponsored Brand campaign budgets
06th Mar
3
Sponsored Display targeting adjustments
05th Mar
Show code
<RecommendationAccordion
  title="BID OPTIMIZATION"
  items={[
    { id: '1', count: 12, description: 'Sponsored Product **keyword** bids', date: '07th Mar' },
    ...
  ]}
  onItemDelete={(id) => {}}
/>

RecommendationAccordion (collapsed by default)

Use defaultExpanded={false} to start collapsed.

12
Sponsored Product keyword bids
07th Mar
5
Sponsored Brand campaign budgets
06th Mar
Show code
<RecommendationAccordion title="..." items={items} defaultExpanded={false} />