Collapsible

An interactive component which expands/collapses a panel.

@peduarte starred 3 repositories

@radix-ui/primitives

import React from 'react';
import * as Collapsible from '@radix-ui/react-collapsible';
import { RowSpacingIcon, Cross2Icon } from '@radix-ui/react-icons';
import './styles.css';

const CollapsibleDemo = () => {
  const [open, setOpen] = React.useState(false);
  return (
    <Collapsible.Root className="CollapsibleRoot" open={open} onOpenChange={setOpen}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span className="Text" style={{ color: 'white' }}>
          @peduarte starred 3 repositories
        </span>
        <Collapsible.Trigger asChild>
          <button className="IconButton">{open ? <Cross2Icon /> : <RowSpacingIcon />}</button>
        </Collapsible.Trigger>
      </div>

      <div className="Repository">
        <span className="Text">@radix-ui/primitives</span>
      </div>

      <Collapsible.Content>
        <div className="Repository">
          <span className="Text">@radix-ui/colors</span>
        </div>
        <div className="Repository">
          <span className="Text">@radix-ui/themes</span>
        </div>
      </Collapsible.Content>
    </Collapsible.Root>
  );
};

export default CollapsibleDemo;

Features

Full keyboard navigation.

Can be controlled or uncontrolled.

Installation

Install the component from your command line.

npm install @radix-ui/react-collapsible

Anatomy

Import the components and piece the parts together.

import * as Collapsible from '@radix-ui/react-collapsible';

export default () => (
  <Collapsible.Root>
    <Collapsible.Trigger />
    <Collapsible.Content />
  </Collapsible.Root>
);

API Reference

Root

Contains all the parts of a collapsible.

Prop	Type	Default
`asChild`	`boolean`	`false`
`defaultOpen`	`boolean`	No default value
`open`	`boolean`	No default value
`onOpenChange`	`function`	No default value
`disabled`	`boolean`	No default value

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled

Trigger

The button that toggles the collapsible.

Prop	Type	Default
`asChild`	`boolean`	`false`

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled

Content

The component that contains the collapsible content.

Prop	Type	Default
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	No default value

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled

CSS Variable	Description
`--radix-collapsible-content-width`	The width of the content when it opens/closes
`--radix-collapsible-content-height`	The height of the content when it opens/closes

Examples

Animating content size

Use the --radix-collapsible-content-width and/or --radix-collapsible-content-height CSS variables to animate the size of the content when it opens/closes. Here's a demo:

// index.jsx
import * as Collapsible from '@radix-ui/react-collapsible';
import './styles.css';

export default () => (
  <Collapsible.Root>
    <Collapsible.Trigger>…</Collapsible.Trigger>
    <Collapsible.Content className="CollapsibleContent">
      …
    </Collapsible.Content>
  </Collapsible.Root>
);

/* styles.css */
.CollapsibleContent {
  overflow: hidden;
}
.CollapsibleContent[data-state='open'] {
  animation: slideDown 300ms ease-out;
}
.CollapsibleContent[data-state='closed'] {
  animation: slideUp 300ms ease-out;
}

@keyframes slideDown {
  from {
    height: 0;
  }
  to {
    height: var(--radix-collapsible-content-height);
  }
}

@keyframes slideUp {
  from {
    height: var(--radix-collapsible-content-height);
  }
  to {
    height: 0;
  }
}

Applying Animations in Non-Tailwind CSS Projects

When working with CSS animations outside of Tailwind, it’s important to avoid conflicts with dynamic height calculations, especially in flex layouts. Instead of using height, you can use max-height for smoother animations and to prevent double rendering issues. Here’s how you can define the animations using max-height:

/* styles.css */
.AccordionContent {
  overflow: hidden;
}
.AccordionContent[data-state='open'] {
  animation: slideDown 300ms ease-out;
}
.AccordionContent[data-state='closed'] {
  animation: slideUp 300ms ease-out;
}

@keyframes slideDown {
  from {
    max-height: 0;
  }
  to {
    max-height: var(--radix-accordion-content-height);
  }
}

@keyframes slideUp {
  from {
    max-height: var(--radix-accordion-content-height);
  }
  to {
    max-height: 0;
  }
}

Using max-height ensures that the animation doesn’t conflict with the automatic height calculations performed by flex layouts, leading to smoother transitions without layout recalculation issues.