AccordionContainer

Usage

import { AccordionContainer } from '@acronis-platform/ui-react';

AccordionContainer is the shared disclosure primitive behind Card's and Section's isCollapsable variant. It's built directly on Base UI's Collapsible and owns only the disclosure mechanics — open state, the trigger button, chevron rotation, and panel height animation. It never imposes visual styling beyond what that mechanic itself requires: Root and Content carry no padding/background/border, and Trigger carries no position or hover opinion beyond its own 32×32 hit target and chevron color (the same neutral treatment Accordion's chevron uses). Every other visual decision — header layout, spacing, background, borders — stays owned by whichever component composes it.

When collapsible is true, Root also defaults to display: contents (applied as contents!, so it wins over a render-prop element's own conflicting display class), so it never becomes a box in the consumer's flex/grid layout — this is what lets Section's root gap apply directly across its header and content instead of being silently dropped by the wrapper. Pass an important-modified display utility (e.g. className="flex!") if you rely on Root being a real box — tailwind-merge resolves the conflict in your favor; a non-important utility (flex) won't be deduped against contents! and loses the cascade to it.

When collapsible is false, children render directly with no wrapping element — matching the Figma isCollapsable=false state — unless a ref/className/style/render/DOM prop is supplied, in which case Root and Content wrap children in a plain div so those aren't silently dropped.

children also accepts a render-prop function receiving the current { open } state, so content placed outside AccordionContainer.Content (e.g. a header) can vary by state even when AccordionContainer owns the open state itself (uncontrolled).

Status: draft. No single Figma node maps 1:1 to this component — it's a generic primitive factored out of Card's and Section's confirmed isCollapsable contract. No Figma Code Connect file exists for this reason.

Examples

function CollapsibleCard({ collapsible, title, children }) {
  return (
    <AccordionContainer collapsible={collapsible} defaultOpen>
      {({ open }) => (
        <>
          <div className="flex items-center justify-between border-b p-4">
            <span className="font-medium">{title}</span>
            <AccordionContainer.Trigger
              aria-label={open ? 'Collapse' : 'Expand'}
              className="size-8 rounded-md hover:bg-[var(--ui-background-surface-hover)]"
            />
          </div>
          <AccordionContainer.Content>
            <div className="p-4">{children}</div>
          </AccordionContainer.Content>
        </>
      )}
    </AccordionContainer>
  );
}

Not collapsible — no trigger, no panel wrapper:

<AccordionContainer collapsible={false}>
  <div className="p-4">Always-visible content.</div>
</AccordionContainer>

API Reference

AccordionContainer.Trigger and AccordionContainer.Content accept their underlying Base UI part props (Collapsible.Trigger / Collapsible.Panel) plus className.