Collapsible

<script setup lang="ts">
import { UnfoldMoreIcon } from '@hugeicons/core-free-icons'
import { HugeiconsIcon } from '@hugeicons/vue'
import { ref } from 'vue'
import { Button } from '@/components/ui/button'
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/components/ui/collapsible'

const isOpen = ref(false)
</script>

<template>
  <Collapsible
    v-model:open="isOpen"
    class="flex w-[350px] flex-col gap-2"
  >
    <div class="flex items-center justify-between gap-4 px-4">
      <h4 class="text-sm font-semibold">
        @peduarte starred 3 repositories
      </h4>
      <CollapsibleTrigger as-child>
        <Button variant="ghost" size="icon" class="size-8">
          <HugeiconsIcon :icon="UnfoldMoreIcon" :stroke-width="2" />
          <span class="sr-only">Toggle</span>
        </Button>
      </CollapsibleTrigger>
    </div>
    <div class="rounded-md border px-4 py-2 font-mono text-sm">
      @radix-ui/primitives
    </div>
    <CollapsibleContent class="flex flex-col gap-2">
      <div class="rounded-md border px-4 py-2 font-mono text-sm">
        @radix-ui/colors
      </div>
      <div class="rounded-md border px-4 py-2 font-mono text-sm">
        @stitches/react
      </div>
    </CollapsibleContent>
  </Collapsible>
</template>

Installation

Install the packages

npm install @animate-ui/vue motion-v

pnpm add @animate-ui/vue motion-v

yarn add @animate-ui/vue motion-v

bun add @animate-ui/vue motion-v

Add the shadcn-vue component

npx shadcn-vue@latest add collapsible

pnpm dlx shadcn-vue@latest add collapsible

yarn dlx shadcn-vue@latest add collapsible

bun x shadcn-vue@latest add collapsible

Animate it

The CLI finds your shadcn-vue 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

<script setup lang="ts">
import {
  CollapsibleContent,
  CollapsibleRoot,
  CollapsibleTrigger,
} from '@animate-ui/vue/primitives/reka-ui';
</script>

<template>
  <CollapsibleRoot>
    <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
    <CollapsibleContent>
      Yes. Free to use for personal and commercial projects.
    </CollapsibleContent>
  </CollapsibleRoot>
</template>

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 (default-open), it animates open on mount (page load).
--reka-collapsible-content-height and --reka-collapsible-content-width read auto: classes using them follow Motion's height instead of a stale measure.
With force-mount, 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.