Collapsible

A single togglable section built on Base UI’s Collapsible primitive. For multiple collapsible sections with exclusive selection, use Accordion instead.

Import

import { Collapsible } from "chunks-ui";

Basic Usage

<Collapsible.Root>
  <Collapsible.Trigger>Toggle details</Collapsible.Trigger>
  <Collapsible.Panel>
    <div className="pb-4">Hidden content revealed on click.</div>
  </Collapsible.Panel>
</Collapsible.Root>

Default Open

Set defaultOpen to render the panel expanded on first mount:

<Collapsible.Root defaultOpen>
  <Collapsible.Trigger className="group flex items-center gap-1.5">
    Shipping information
    <ChevronRightIcon className="size-4 rotate-0 group-data-panel-open:rotate-90" />
  </Collapsible.Trigger>
  <Collapsible.Panel>...</Collapsible.Panel>
</Collapsible.Root>

The chevron rotation uses Base UI’s data-panel-open attribute — see Styling with data attributes below.

Controlled

Use open and onOpenChange for controlled state:

const [open, setOpen] = useState(false);
 
<Collapsible.Root open={open} onOpenChange={setOpen}>
  <Collapsible.Trigger>Advanced settings</Collapsible.Trigger>
  <Collapsible.Panel>...</Collapsible.Panel>
</Collapsible.Root>

Animation

The panel height animates using CSS transitions via Base UI’s --collapsible-panel-height CSS variable, matching the Accordion animation pattern. No JavaScript animation library is required.

Compound Parts

Styling with data attributes

Base UI exposes data attributes on each part that you can target with Tailwind’s data-* variant — no JavaScript state needed.

Trigger

The Trigger receives data-panel-open when the panel is expanded. Combine it with Tailwind’s group utility to style child elements:

<Collapsible.Trigger className="group flex items-center gap-1.5">
  Details
  <ChevronRightIcon className="size-4 transition-transform group-data-panel-open:rotate-90" />
</Collapsible.Trigger>

Panel

The Panel exposes data-open, data-closed, data-starting-style, and data-ending-style:

<Collapsible.Panel
  className="h-(--collapsible-panel-height) data-starting-style:h-0 data-ending-style:h-0"
/>

CSS variables

Props

All compound parts accept the same props as their underlying Base UI Collapsible counterparts. No additional custom props are defined.