Collapsible

Powered by

Base UIShadcn UIAnimate UIMotion

Installation

Controlled

Multiple independent collapsibles

Disabled

Default open

Chevron on leading edge

Reveal sensitive content

Usage

<Collapsible>
  <CollapsibleTrigger>Collapsible Trigger</CollapsibleTrigger>
  <CollapsibleContent>Collapsible Content</CollapsibleContent>
</Collapsible>

When to use

Use this decision tree to determine when to use the Collapsible component:

Props

Keyboard interactions

Accessibility

• The trigger exposes aria-expanded + aria-controls pointing at the panel; Base UI also sets the compat data-state="open" | "closed" attribute so existing CSS selectors keep working.
• The trigger must be a real button (or another focusable element via asChild); static <div> triggers lose keyboard activation.
• Use keepMounted on CollapsibleContent when the hidden content must remain in the DOM for SEO, intersection observers, or mid-animation measurements. See MIGRATION.md — forceMount from Radix is no longer forwarded.

Controlled vs uncontrolled

Uncontrolled — trigger toggles the panel locally:

<Collapsible>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>{/* ... */}</CollapsibleContent>
</Collapsible>

Controlled — drive open from parent state (e.g. expand all / collapse all from a toolbar):

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

<Collapsible open={open} onOpenChange={setOpen}>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>{/* ... */}</CollapsibleContent>
</Collapsible>

Animate UI Props

CollapsibleContent

Don't delete from the DOM

The choice made (also Base UI's default) is to remove the element from the DOM for accessibility and performance reasons. However, this may pose a problem for SEO. If you want your Collapsible content to be taken into account by Google, replace the CollapsibleContent component with:

const CollapsibleContent = React.forwardRef<
  React.ElementRef<typeof CollapsiblePrimitive.Content>,
  CollapsibleContentProps
>(
  (
    {
      className,
      children,
      transition = { type: 'spring', stiffness: 150, damping: 17 },
      ...props
    },
    ref,
  ) => {
    const { isOpen } = useCollapsible();

    return (
      <CollapsiblePrimitive.Content asChild forceMount ref={ref} {...props}>
        <motion.div
          layout
          initial={false}
          animate={
            isOpen
              ? { opacity: 1, height: 'auto', overflow: 'hidden' }
              : { opacity: 0, height: 0, overflow: 'hidden' }
          }
          transition={transition}
          className={className}
        >
          {children}
        </motion.div>
      </CollapsiblePrimitive.Content>
    );
  },
);

Credits

• We use Base UI for the collapsible component.
• We take our inspiration from Shadcn UI for the collapsible style.
• We use Animate UI from imskyleen for all the animations.