Collapsible

A single disclosure whose content springs open to its natural height and blurs into focus.

State: closed

<script setup lang="ts">
import { Collapsible } from '@/components/ui/collapsible'
import { ShoppingBag } from 'lucide-vue-next'
import { ref } from 'vue'

const open = ref(false)
const panel = ref<InstanceType<typeof Collapsible>>()

const items = [
  { name: 'Merino crew sweater', detail: 'Oat · M', price: 128 },
  { name: 'Selvedge denim', detail: 'Indigo · 32', price: 165 },
  { name: 'Canvas tote', detail: 'Natural', price: 38 },
]
const total = items.reduce((sum, item) => sum + item.price, 0)
</script>

<template>
  <div class="w-full max-w-sm space-y-3">
    <Collapsible ref="panel" v-model:open="open">
      <template #trigger>
        <span class="flex items-center gap-3">
          <span class="flex size-8 items-center justify-center rounded-lg bg-muted">
            <ShoppingBag class="size-4" />
          </span>
          <span class="flex-1">
            <span class="block">Order summary</span>
            <span class="block text-xs font-normal text-muted-foreground">{{ items.length }} items · ships Thursday</span>
          </span>
          <span class="tabular-nums">${{ total }}</span>
        </span>
      </template>
      <ul class="m-0 list-none divide-y p-0">
        <li v-for="item in items" :key="item.name" class="flex items-center justify-between gap-3 py-2.5">
          <span>
            <span class="block text-foreground">{{ item.name }}</span>
            <span class="block text-xs">{{ item.detail }}</span>
          </span>
          <span class="tabular-nums text-foreground">${{ item.price }}</span>
        </li>
      </ul>
    </Collapsible>
    <p class="m-0 flex items-center justify-between text-xs text-muted-foreground">
      <span>State: <code>{{ open ? 'open' : 'closed' }}</code></span>
      <button
        type="button"
        class="rounded-md px-2 py-1 font-medium text-foreground outline-none hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50"
        @click="panel?.toggle()"
      >
        Toggle from outside
      </button>
    </p>
  </div>
</template>

Installation

pnpm dlx shadcn-vue@latest add https://vuelix.dev/r/collapsible.json

Manual installation

Install the dependencies:

npm install motion-v

Then copy these files into components/ui/collapsible/ (plus lib/utils.ts if you don't have it):

Collapsible.vue

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { AnimatePresence, motion, useReducedMotion } from 'motion-v'
import { computed, useId } from 'vue'
import { cn } from '@/lib/utils'

const props = withDefaults(defineProps<{
  /** Trigger text. Use the `#trigger` slot for richer content. */
  title?: string
  /** Prevents toggling. */
  disabled?: boolean
  class?: HTMLAttributes['class']
  /** Classes for the trigger button. */
  triggerClass?: HTMLAttributes['class']
  /** Classes for the content wrapper. */
  contentClass?: HTMLAttributes['class']
}>(), {
  disabled: false,
})

const open = defineModel<boolean>('open', { default: false })
const emit = defineEmits<{ toggle: [open: boolean] }>()

const uid = useId()
const reduced = useReducedMotion()

// A soft, slightly underdamped spring so the height settles with a little life.
const spring = { type: 'spring', stiffness: 300, damping: 28, mass: 0.9 } as const
const transition = computed(() => (reduced.value ? { duration: 0 } : spring))

function toggle(value = !open.value) {
  if (props.disabled || value === open.value)
    return
  open.value = value
  emit('toggle', value)
}

defineExpose({
  /** Toggle, or force a state with `toggle(true)` / `toggle(false)`. */
  toggle,
  show: () => toggle(true),
  hide: () => toggle(false),
})
</script>

<template>
  <div
    :class="cn('w-full overflow-hidden rounded-xl border bg-card text-card-foreground', props.class)"
    :data-state="open ? 'open' : 'closed'"
  >
    <button
      :id="`${uid}-trigger`"
      type="button"
      :class="cn(
        'flex w-full items-center justify-between gap-4 rounded-[inherit] px-4 py-3 text-left text-sm font-medium outline-none transition-colors hover:bg-muted/50 focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50',
        props.triggerClass,
      )"
      :aria-expanded="open"
      :aria-controls="`${uid}-content`"
      :disabled="props.disabled"
      @click="toggle()"
    >
      <span class="min-w-0 flex-1">
        <slot name="trigger" :open="open">{{ props.title }}</slot>
      </span>
      <motion.span
        aria-hidden="true"
        class="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground"
        :animate="{ rotate: open ? 90 : 0 }"
        :transition="transition"
      >
        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg>
      </motion.span>
    </button>
    <AnimatePresence :initial="false">
      <motion.div
        v-if="open"
        :id="`${uid}-content`"
        key="content"
        role="region"
        :aria-labelledby="`${uid}-trigger`"
        class="overflow-hidden"
        :initial="{ height: 0 }"
        :animate="{ height: 'auto' }"
        :exit="{ height: 0 }"
        :transition="transition"
      >
        <motion.div
          :class="cn('px-4 pb-4 pt-1 text-sm text-muted-foreground', props.contentClass)"
          :initial="{ opacity: 0, filter: 'blur(6px)', scale: 0.98 }"
          :animate="{ opacity: 1, filter: 'blur(0px)', scale: 1 }"
          :exit="{ opacity: 0, filter: 'blur(6px)', scale: 0.98 }"
          :transition="reduced ? { duration: 0 } : { duration: 0.28, ease: [0.22, 1, 0.36, 1] }"
          style="transform-origin: top center"
        >
          <slot :close="() => toggle(false)" />
        </motion.div>
      </motion.div>
    </AnimatePresence>
  </div>
</template>

index.ts

export { default as Collapsible } from './Collapsible.vue'

Usage

import { Collapsible } from '@/components/ui/collapsible'

<Collapsible v-model:open="open" title="Show advanced settings">
  <p>Anything you like.</p>
</Collapsible>

API

Prop	Type	Default	Description
v-model:open	boolean	false	Open state.
title	string	—	Trigger text (or use the #trigger slot).
disabled	boolean	false	Prevents toggling.
triggerClass	string	—	Classes for the trigger button.
contentClass	string	—	Classes for the content wrapper.

Slot	Props	Description
trigger	{ open }	Custom trigger content; the chevron is added for you.
default	{ close }	The collapsible content.

Event	Payload	Description
toggle	open: boolean	Fired after the state changes from the trigger or an exposed method.

Exposed via a template ref: toggle(force?), show() and hide().

The trigger is a real <button> with aria-expanded / aria-controls, and the content is a labelled region. With prefers-reduced-motion the panel opens instantly.