Collapsible

Order #4189

StatusShipped

"use client"

import * as React from "react"
import {
  DisclosurePanel as CollapsibleContentPrimitive,
  Disclosure as CollapsiblePrimitive,
  Button as CollapsibleTriggerPrimitive,
  type ButtonProps,
  type DisclosurePanelProps,
  type DisclosureProps,
} from "@animate-ui/react/primitives/react-aria"

import { UnfoldMoreIcon } from "@hugeicons/core-free-icons"
import { HugeiconsIcon } from "@hugeicons/react"

import { Button } from "@/components/ui/button"

function Collapsible({ ...props }: DisclosureProps) {
  return <CollapsiblePrimitive data-slot="collapsible" {...props} />
}

function CollapsibleTrigger({ ...props }: ButtonProps) {
  return (
    <CollapsibleTriggerPrimitive
      slot="trigger"
      data-slot="collapsible-trigger"
      {...props}
    />
  )
}

function CollapsibleContent({ ...props }: DisclosurePanelProps) {
  return (
    <CollapsibleContentPrimitive data-slot="collapsible-content" {...props} />
  )
}

export { Collapsible, CollapsibleTrigger, CollapsibleContent }

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

  return (
    <Collapsible
      isExpanded={isOpen}
      onExpandedChange={setIsOpen}
      className="flex w-[350px] flex-col gap-2"
    >
      <div className="flex items-center justify-between gap-4 px-4">
        <h4 className="text-sm font-semibold">Order #4189</h4>
        <Button slot="trigger" variant="ghost" size="icon" className="size-8">
          <HugeiconsIcon icon={UnfoldMoreIcon} strokeWidth={2} />
          <span className="sr-only">Toggle details</span>
        </Button>
      </div>
      <div className="flex items-center justify-between rounded-md border px-4 py-2 text-sm">
        <span className="text-muted-foreground">Status</span>
        <span className="font-medium">Shipped</span>
      </div>
      <CollapsibleContent>
        <div className="flex flex-col gap-2">
          <div className="rounded-md border px-4 py-2 text-sm">
            <p className="font-medium">Shipping address</p>
            <p className="text-muted-foreground">
              100 Market St, San Francisco
            </p>
          </div>
          <div className="rounded-md border px-4 py-2 text-sm">
            <p className="font-medium">Items</p>
            <p className="text-muted-foreground">2x Studio Headphones</p>
          </div>
        </div>
      </CollapsibleContent>
    </Collapsible>
  )
}

Installation

Install the packages

npm install @animate-ui/react motion

pnpm add @animate-ui/react motion

yarn add @animate-ui/react motion

bun add @animate-ui/react motion

Add the shadcn/ui component

npx shadcn@latest add collapsible

pnpm dlx shadcn@latest add collapsible

yarn dlx shadcn@latest add collapsible

bun x shadcn@latest add collapsible

Animate it

The CLI finds your shadcn/ui components through components.json, swaps their primitive imports for Animate UI's and removes the CSS animation classes Motion replaces.

npx @animate-ui/cli@latest animate collapsible

pnpm dlx @animate-ui/cli@latest animate collapsible

yarn dlx @animate-ui/cli@latest animate collapsible

bun x @animate-ui/cli@latest animate collapsible

Usage

Import from Animate UI instead of react-aria-components: it re-exports all of React Aria, with an animated DisclosurePanel. Everything else stays the same.

import {
  Button,
  Disclosure,
  DisclosurePanel,
} from '@animate-ui/react/primitives/react-aria';

export function Changelog() {
  return (
    <Disclosure>
      <Button slot="trigger">Show all changes</Button>
      <DisclosurePanel>
        Drop-in primitives for Radix UI, Base UI and React Aria.
      </DisclosurePanel>
    </Disclosure>
  );
}

Animation

DisclosurePanel unfolds like the accordions: its height grows from 0 while the content fades in from a 2px blur, over 350ms on a soft ease-out. While it moves, its bottom edge fades (over 16px, or over the part still hidden): the content never meets what follows it with a hard cut. It folds back the same way, in reverse.
Toggling it while it moves retargets from where it is.
Expanded by default (defaultExpanded), it animates open on mount (page load), as in v1.
React Aria keeps a closed panel mounted with hidden="until-found": the panel stays visible (and inert) while it collapses, then gets hidden="until-found" back, so find-in-page can still reveal it. A panel revealed by find-in-page opens at once, as in React Aria.
--disclosure-panel-height and --disclosure-panel-width read auto: classes using them follow Motion's height.
<AnimateUIProvider tempo> paces both transitions.
Under reduced motion, the height changes at once; the fade and the blur still play.