Expandable

Installation

npx shadcn@latest add @blank/expandable

Usage

import {
  Expandable,
  ExpandableContent,
  ExpandableTrigger,
} from "@/components/ui/expandable"

<Expandable className="w-80 transition-[width] data-[state=open]:w-96">
  <ExpandableTrigger>Design sync</ExpandableTrigger>
  <ExpandableContent preset="blur" stagger>
    <p>Agenda</p>
    <p>Attendees</p>
  </ExpandableContent>
</Expandable>

Expandable is Collapsible with motion. Reach for Collapsible when content just needs to show and hide; reach for this when the reveal is part of the design — a card that grows, details that arrive one after another.

The root does not animate itself: it puts data-state in the DOM, so its own width, shadow or radius follow with plain CSS transitions. Each ExpandableContent springs its height and brings its children in with a preset — fade, blur, slide-up, slide-down or scale — optionally staggered. With reduced motion, everything opens instantly.

Examples

Show more

Several ExpandableContents, or one placed mid-list, all follow the same root.