Collapse

A layout-transition primitive that eases height open and closed with CSS grid - the base for accordions.

This region eases open and closed with WAAPI motion on the grid track — never touches height: auto.
The width axis animates the inline size instead, so the region opens sideways out of the trigger.

Install Collapse

1. New project? One command installs the package and wires everything - see Installation:

bash
pnpm dlx zyncat-ui init

2. Import the component - it loads its own stylesheet:

tsx
import { Collapse } from '@zyncat/ui/collapse';

Usage

tsx
import { Collapse } from '@zyncat/ui/collapse';
 
<Collapse open={open}>
  <div>Collapsing region content.</div>
</Collapse>

Compose Collapse in your application. No Tailwind or external styling library is required; every value resolves from Zyncat UI's token vocabulary.

Collapse props

Collapse

PropTypeDefaultDescription
...htmlAttributesHTMLAttributes—Standard <div> attributes (aria-*, data-*, ...) forwarded to the root.
openboolean—Open/closed state. Closed content is also removed from the tab order, the accessibility tree and hit-testing once the exit transition completes; reopening restores it before the entrance runs.
axis'height' | 'width''height'Axis to animate.
fadeboolean—Also cross-fade contents while resizing; follows `duration` / `ease`.
innerClassNamestring—Class applied to the inner measured wrapper - the clipping element (overflow: hidden). Content whose focus ring sits flush to its edge needs padding there, or the ring clips.
animationDisableableAnimationduration 'slow' + ease 'entrance' (fade-out: 'base' + 'standard')Size (and fade) transition timing - motion tokens only, each field one token or `{ open, close }`, e.g. `{ duration: { close: 'fast' }, ease: { close: 'exit' } }`. `null` disables the transition (open/close snap instantly).
askeyof JSX.IntrinsicElements'div'Tag to render as.
classNamestring—Extra class(es) merged onto the root.
styleCSSProperties—Inline styles merged onto the root (composed with the timing custom properties).
childrenReactNode—The collapsing content.

Frequently asked questions

No - it transitions the CSS grid-template-rows property between 0fr and 1fr (grid-template-columns for axis="width"), so the browser interpolates the track size natively. Children stay mounted in the DOM the entire time; closed content is only hidden through visibility, not removed, which keeps it present in the markup rather than unmounted.

Yes, but as the primitive underneath, not a pre-built accordion widget - there's no group-exclusivity prop for a single open panel. Render one Collapse per section, track which section id is open in your own state, and toggle each Collapse's open prop; axis="height", the default, is what an accordion needs.

animation takes motion-scale tokens only: duration (fast|base|slow|slower|slowest) and ease (standard|entrance|exit|spring|glide), each as one token or split per direction, e.g. { duration: { close: 'fast' }, ease: { close: 'exit' } }. Pass animation={null} to snap instantly, and prefers-reduced-motion collapses every transition to 1ms automatically.

fade cross-fades the content's opacity alongside the size transition - on open it fades in about 60ms after the size starts, so the reveal doesn't read as a flat wipe, and on close it fades out immediately rather than waiting for the size to finish.

Set in Geist & Newsreader — animated by the house engineZyncat UI · Rev 0.11 · MIT · Built by Tabsir Ahammed · Source on GitHub