Photonix UI - React Components, Templates & Figma Design System

Collapse

Toggle visibility of content with a smooth transition.

Preview

Usage

import { Collapse, Button } from '@photonix/ultimate';

<Button onClick={() => setOpen(!open)}>Toggle</Button>
<Collapse isOpen={open}>
  Content...
</Collapse>

Component API

Collapse

Prop	Type	Default	Description
isOpen	`boolean`	`-`	Whether the content is visible
unmountOnExit	`boolean`	`false`	Whether to unmount the content when closed
defaultIsOpen	`boolean`	`-`	Whether to start in the open state (only useful if uncontrolled, but this component is controlled)
animateOpacity	`boolean`	`true`	Animation duration in ms (optional, driven by CSS but can be used for delays if needed)
children	`React.ReactNode`	`-`	Children elements

Collapse

Preview

Component API

Collapse

On this page