Collapsible

An interactive component that expands/collapses content.

@nextjs/react-collapsible

A React component to create collapsible sections.

Installation

npm i @radix-ui/react-collapsible

Usage

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

export function CollapsibleDemo() {
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <Collapsible
      open={isOpen}
      onOpenChange={setIsOpen}
      className="w-full max-w-md"
    >
      <div className="flex items-center justify-between space-x-4 px-4">
        <h4 className="text-sm font-semibold">
          @nextjs/react-collapsible
        </h4>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="sm" className="p-0">
            <ChevronDown className="h-4 w-4" />
            <span className="sr-only">Toggle</span>
          </Button>
        </CollapsibleTrigger>
      </div>
      <div className="rounded-md border px-4 py-3 font-mono text-sm">
        A React component to create collapsible sections.
      </div>
      <CollapsibleContent className="space-y-2 px-4">
        <div className="rounded-md border px-4 py-3 font-mono text-sm">
          A React component to create collapsible sections.
        </div>
        <div className="rounded-md border px-4 py-3 font-mono text-sm">
          Expands and collapses content.
        </div>
      </CollapsibleContent>
    </Collapsible>
  )
}

Animations

The collapsible component uses CSS animations to create smooth transitions. Add these animations to your global CSS or Tailwind configuration:

// In your global CSS or tailwind.config.js:

"@keyframes collapsible-down": {
  "from": { height: 0 },
  "to": { height: "var(--radix-collapsible-content-height)" }
},
"@keyframes collapsible-up": {
  "from": { height: "var(--radix-collapsible-content-height)" },
  "to": { height: 0 }
},

"animation": {
  "collapsible-down": "collapsible-down 0.2s ease-out",
  "collapsible-up": "collapsible-up 0.2s ease-out"
}

Examples

With Different Icons

Collapsible with custom icons

Click the icon to show more content.

Custom Trigger

Click anywhere on this header to toggle

Multiple Collapsibles

Section 1

Section 2

Props

Component	Props	Description
Collapsible	open?: boolean defaultOpen?: boolean onOpenChange?: (open: boolean) => void disabled?: boolean	The root collapsible component.
CollapsibleTrigger	asChild?: boolean	The button that toggles the collapsible.
CollapsibleContent	forceMount?: boolean	The component that contains the collapsible content.

Accessibility

The Collapsible component uses @radix-ui/react-collapsible which implements the WAI-ARIA Disclosure Pattern.

Keyboard Interactions

Space / Enter: Toggles the collapsible when focus is on the trigger.

Documentation