Collapsible

Something that opens and closes in place: the panel unfolds to its own height on the reveal timing and folds back faster.

Install

terminal

# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/collapsible

Examples

Notes behind a button

collapsible-basic.tsx

import { Button } from "@/components/zero/button";import {  Collapsible,  CollapsibleContent,  CollapsibleTrigger,} from "@/components/zero/collapsible";import { ChevronDownIcon } from "@/components/zero/icons";export default function CollapsibleBasic() {  return (    <Collapsible className="grid w-full max-w-sm gap-3">      <CollapsibleTrigger        render={          <Button            variant="secondary"            className="justify-self-start data-panel-open:[&_svg]:rotate-180 [&_svg]:transition-transform [&_svg]:duration-(--zero-dur-base)"          />        }      >        Route notes        <ChevronDownIcon />      </CollapsibleTrigger>      <CollapsibleContent>        <ul className="grid gap-2 font-medium font-zero-text text-zero-sm text-zero-text-2">          <li>Gate 4 is closed after 21:00.</li>          <li>Keep to the east side of the yards.</li>          <li>Sign for the crate at the north gate.</li>        </ul>      </CollapsibleContent>    </Collapsible>  );}

Behaviour

The trigger brings no look of its own; give it a Button through render. Under reduced motion the panel simply appears.

Props

Collapsible

Prop	Type	Default	Description
open / defaultOpen	boolean	false	Open, controlled or not.

Also takes every prop of Base UI's Collapsible.Root.

CollapsibleTrigger, CollapsibleContent

Also takes every prop of Base UI's Collapsible.Trigger.