Components

Collapsible

Shows and hides a section of content.

Three peer dependencies

Installation

npx shadcn@latest add @blank/collapsible

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

<Collapsible>
  <CollapsibleTrigger>Show details</CollapsibleTrigger>
  <CollapsibleContent>Details</CollapsibleContent>
</Collapsible>

CollapsibleContent animates its height open and closed from Radix's measured size, and skips the animation when the reader prefers reduced motion.

Hold open yourself when the trigger's label or the surrounding copy depends on it.

Build settings

Using the framework defaults