Collapsible

Order #4189

StatusShipped

"use client"

import * as React from "react"
import { Collapsible as CollapsiblePrimitive } from "@animate-ui/react/primitives/radix-ui"

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

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

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

function CollapsibleTrigger({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
  return (
    <CollapsiblePrimitive.CollapsibleTrigger
      data-slot="collapsible-trigger"
      {...props}
    />
  )
}

function CollapsibleContent({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
  return (
    <CollapsiblePrimitive.CollapsibleContent
      data-slot="collapsible-content"
      {...props}
    />
  )
}

export { Collapsible, CollapsibleTrigger, CollapsibleContent }

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

  return (
    <Collapsible
      open={isOpen}
      onOpenChange={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>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="icon" className="size-8">
            <HugeiconsIcon icon={UnfoldMoreIcon} strokeWidth={2} />
            <span className="sr-only">Toggle details</span>
          </Button>
        </CollapsibleTrigger>
      </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 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>
      </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 the primitive from Animate UI instead of Radix UI. Everything else stays the same.

import { Collapsible } from '@animate-ui/react/primitives/radix-ui';

export function Changelog() {
  return (
    <Collapsible.Root>
      <Collapsible.Trigger>Show all changes</Collapsible.Trigger>
      <Collapsible.Content>
        Drop-in primitives for Radix UI, Base UI and React Aria.
      </Collapsible.Content>
    </Collapsible.Root>
  );
}

Coming from the @radix-ui/react-collapsible package? Use the subpath: import * as CollapsiblePrimitive from '@animate-ui/react/primitives/radix-ui/collapsible'.

Animation

Content 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, then unmounts.
Toggling it while it moves retargets from where it is.
Open by default (defaultOpen), it animates open on mount (page load), as in v1.
--radix-collapsible-content-height and --radix-collapsible-content-width read auto: classes using them follow Motion's height instead of a stale measure.
With forceMount, closed content stays in the DOM, collapsed and inert.
<AnimateUIProvider tempo> paces both transitions.
Under reduced motion, the height changes at once; the fade and the blur still play.