npm install @radix-ui/react-collapsible

import { Collapsible } from "radix-ui";

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

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "defaultOpen",
		type: "boolean",
		description:
			"The open state of the collapsible when it is initially rendered. Use when you do not need to control its open state.",
	},
	{
		name: "open",
		type: "boolean",
		description: (
			<span>
				The controlled open state of the collapsible. Must be used in
				conjunction with <Code>onOpenChange</Code>.
			</span>
		),
	},
	{
		name: "onOpenChange",
		type: "(open: boolean) => void",
		typeSimple: "function",
		description:
			"Event handler called when the open state of the collapsible changes.",
	},
	{
		name: "disabled",
		type: "boolean",
		description: (
			<span>
				When <Code>true</Code>, prevents the user from interacting with the
				collapsible.
			</span>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "forceMount",
		type: "boolean",
		description:
			"Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.",
	},
]}

// index.jsx
import { Collapsible } from "radix-ui";
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;
	}
}