Collapsible

A single trigger that shows or hides one region of content. Built on base-ui Collapsible — open state, ARIA wiring, and the data-panel-open / data-open hooks come for free.

Reach for Collapsible when you have one thing to reveal — an “Advanced options” block, an inline detail panel, a sidebar sub-menu. When you have a set of related sections that read as a group (FAQ, settings categories), use Accordion instead: it owns the shared open state and the single-vs-multiple-open policy across items. A Collapsible governs exactly one section and tracks nothing about its siblings.

Compose three parts: Collapsible (root, owns the open state), CollapsibleTrigger (the toggle), and CollapsibleContent (the region it reveals). The component is unstyled — bring your own trigger and panel chrome.

Basic

The root is uncontrolled and closed by default. Render the trigger as a Button via its render prop, and let the root’s data-open drive the chevron with group-data-open.

import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger } from "@vesyl/ui-next";
import { ChevronDown } from "lucide-react";

export default function CollapsibleBasic() {
  return (
    <Collapsible className="group w-full max-w-md">
      <CollapsibleTrigger
        render={(props) => (
          <Button {...props} variant="outline" className="w-full justify-between">
            Advanced shipping options
            <ChevronDown className="size-4 transition-transform duration-150 group-data-open:rotate-180" />
          </Button>
        )}
      />
      <CollapsibleContent className="mt-2 rounded-md border p-4 text-sm text-muted-foreground">
        <p>Require signature on delivery, add insurance, and set a Saturday delivery flag.</p>
        <p className="mt-2">These apply to every package in the shipment.</p>
      </CollapsibleContent>
    </Collapsible>
  );
}

Open by default

Pass defaultOpen to start expanded while keeping the toggle uncontrolled — useful when the content is the point of the view and you only want to let people fold it away.

2× Recycled mailer (small)
1× Thermal label sheet
1× Packing slip

import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger } from "@vesyl/ui-next";
import { ChevronDown } from "lucide-react";

export default function CollapsibleDefaultOpen() {
  return (
    <Collapsible defaultOpen className="group w-full max-w-md">
      <CollapsibleTrigger
        render={(props) => (
          <Button {...props} variant="outline" className="w-full justify-between">
            Package contents
            <ChevronDown className="size-4 transition-transform duration-150 group-data-open:rotate-180" />
          </Button>
        )}
      />
      <CollapsibleContent className="mt-2 rounded-md border p-4 text-sm text-muted-foreground">
        <ul className="space-y-1">
          <li>2× Recycled mailer (small)</li>
          <li>1× Thermal label sheet</li>
          <li>1× Packing slip</li>
        </ul>
      </CollapsibleContent>
    </Collapsible>
  );
}

With a DisclosureButton

DisclosureButton is the purpose-built trigger for disclosures: a compact ghost control whose chevron rotates automatically from the data-panel-open the trigger sets. Render it as the CollapsibleTrigger target and you track no state and write no rotation CSS.

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
  DisclosureButton,
} from "@vesyl/ui-next";

export default function CollapsibleDisclosureButton() {
  return (
    <Collapsible className="w-full max-w-md">
      <CollapsibleTrigger
        render={(props) => <DisclosureButton {...props}>Shipping details</DisclosureButton>}
      />
      <CollapsibleContent className="mt-2 rounded-md border p-4 text-sm text-muted-foreground">
        <p className="font-medium text-foreground">Ground · 3–5 business days</p>
        <p className="mt-1">Tracking updates twice daily. Signature not required.</p>
      </CollapsibleContent>
    </Collapsible>
  );
}

Controlled

The root is uncontrolled by default — give it defaultOpen or nothing. To drive it yourself (e.g. to open the panel from elsewhere), pass open and onOpenChange.

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

<Collapsible open={open} onOpenChange={setOpen}>
  <CollapsibleTrigger render={(props) => <Button {...props}>Advanced shipping options</Button>} />
  <CollapsibleContent>…</CollapsibleContent>
</Collapsible>;

Reference

Collapsible

Root container. Renders a <div>. Extends base-ui Collapsible.Root props.

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`false`	Initially open (uncontrolled)
`open`	`boolean`	—	Open state (controlled)
`onOpenChange`	`(open: boolean) => void`	—	Fires when the panel opens or closes
`disabled`	`boolean`	`false`	Ignore user interaction; the trigger can’t toggle
`className`	`string`	—	Merged onto the root; sets `data-open` / `data-closed`

CollapsibleTrigger

The toggle. Extends base-ui Collapsible.Trigger props.

Prop	Type	Default	Description
`render`	`ReactElement \| (props, state) => Element`	—	Render as another element (e.g. `Button`, `DisclosureButton`); sets `data-panel-open` on it while open
`children`	`ReactNode`	—	Trigger content when not using `render`

CollapsibleContent

The region revealed by the trigger. Extends base-ui Collapsible.Panel props.

Prop	Type	Default	Description
`children`	`ReactNode`	—	The collapsible content
`className`	`string`	—	Merged onto the panel; sets `data-open` / `data-closed`