Collapse

Super smooth collapsible drawers and accordions for presenting secondary specifications or details on demand.

Preview & Interactive Laboratory

Interactive Toggle Drawer

Usage & Implementation

import { Collapse } from "@/components/ui/collapse"

const [open, setOpen] = React.useState(false);

<Button onClick={() => setOpen(!open)}>
  Toggle Details
</Button>

<Collapse open={open}>
  <div className="p-4 bg-slate-50 rounded-3xl">
    Confidential Details Here...
  </div>
</Collapse>

React / Tailwind

Granular Customization

Collapse Shell

Configures border radius or background styling during expansion.

className={`className`}

Trigger Option

Use any element (button, link, tab) to alter open Boolean state.

className={`open={open}`}

API Reference (Props)

Prop	Type	Default	Description
open	boolean	undefined	Configures current visibility state.
children	React.ReactNode	undefined	Sub-items embedded inside the animation wrapper.