---
title: Collapsible
description: An interactive component which expands/collapses a panel.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="radix-collapsible-demo" />

## Installation

<ComponentInstallation name="radix-collapsible" />

## Usage

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

## Props

<div className="flex flex-row gap-x-3">
  <ExternalLink
    href="https://www.radix-ui.com/primitives/docs/components/collapsible"
    text="Docs"
  />
  <ExternalLink
    href="https://www.radix-ui.com/primitives/docs/components/collapsible#api-reference"
    text="API Reference"
  />
</div>

### Animate UI Props

#### CollapsibleContent

<TypeTable
  type={{
    transition: {
      description: 'The transition of the collapsible content',
      type: 'Transition',
      required: false,
      default: "{ type: 'spring', stiffness: 150, damping: 22 }",
    },
  }}
/>

## Don't delete from the DOM

The choice made is the same as Radix UI, i.e. 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, please **replace the CollapsibleContent component with**:

```tsx title="components/animate-ui/radix-collapsible.tsx"
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 [Radix UI](https://www.radix-ui.com/primitives/docs/components/collapsible) for the collapsible component.
- We take our inspiration from [Shadcn UI](https://ui.shadcn.com/docs/components/collapsible) for the collapsible style.