Collapsible

An interactive component that expands and collapses content panels with smooth height transitions.

collapsible.tsx

Collapsible panel built with Radix Primitives for expanding and contracting UI elements.

ReactRadix UITailwindUI ComponentCollapsible

"use client";

import * as React from "react";
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";

const Collapsible = CollapsiblePrimitive.Root;

const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;

const CollapsibleContent = React.forwardRef<
  React.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>,
  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>
>(({ className, children, ...props }, ref) => (
  <CollapsiblePrimitive.CollapsibleContent
    ref={ref}
    className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down transition-all duration-300"
    {...props}
  >
    {children}
  </CollapsiblePrimitive.CollapsibleContent>
));
CollapsibleContent.displayName = CollapsiblePrimitive.CollapsibleContent.displayName;

export { Collapsible, CollapsibleTrigger, CollapsibleContent };

Interactive Example

Toggle hidden items using a trigger button with rotation icon transition.

@peduarte starred 3 repositories

@radix-ui/primitives

API Reference

Props — Collapsible

Properties for configuring the Collapsible component.

Prop	Type	Default	Description
open	boolean	—	Controlled open state of the collapsible panel.
defaultOpen	boolean	false	Initial open state when uncontrolled.
onOpenChange	(open: boolean) => void	—	Callback function fired when the open state changes.
disabled	boolean	false	Disables interaction with the collapsible trigger.