Collapsible: Unmounted when closed

Set hiddenUntilFound={false} on the content to remove it from the DOM while closed, for heavy panels you don’t want rendered up front.

import { Button } from "@/components/ui/button"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
  CollapsibleTriggerIcon,
} from "@/components/ui/collapsible"

export function CollapsibleUnmounted() {
  return (
    <Collapsible className="flex w-full max-w-sm flex-col gap-2">
      <CollapsibleTrigger
        render={<Button variant="secondary" />}
        className="self-start"
      >
        Details
        <CollapsibleTriggerIcon data-icon="inline-end" />
      </CollapsibleTrigger>
      <CollapsibleContent hiddenUntilFound={false}>
        <p className="text-sm text-muted-foreground">
          Rendered only while open.
        </p>
      </CollapsibleContent>
    </Collapsible>
  )
}

Add this example

This adds the example as components/examples/collapsible/unmounted.tsx, together with the Collapsible component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/collapsible-unmounted.json

To add only the component, follow the Collapsible installation.

Props in this example

The Collapsible props this example sets, from the API reference.

CollapsibleTrigger

Prop	Type	Default
`render`Usually a Button.	`ReactElement \| (props, state) => ReactElement`	`<button>`

CollapsibleContent

Prop	Type	Default
`hiddenUntilFound`Keeps the closed panel in the DOM so page search can find and open it.	`boolean`	`true`

Every prop is in the Collapsible API reference.

More Collapsible examples

See them all, with keyboard support and accessibility notes, on the Collapsible page.