Collapsible

An interactive component that expands and collapses content.

Installation

bash
npx shadcn@latest add collapsible

Import

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

Example

const [isOpen, setIsOpen] = React.useState(false)<Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-[350px] space-y-2">  <div className="flex items-center justify-between space-x-4 px-4">    <h4 className="text-sm font-semibold">@peduarte starred 3 repositories</h4>    <CollapsibleTrigger asChild>      <Button variant="ghost" size="sm">        <ChevronsUpDown className="h-4 w-4" />      </Button>    </CollapsibleTrigger>  </div>  <div className="rounded-md border px-4 py-3 text-sm">@radix-ui/primitives</div>  <CollapsibleContent className="space-y-2">    <div className="rounded-md border px-4 py-3 text-sm">@radix-ui/colors</div>    <div className="rounded-md border px-4 py-3 text-sm">@stitches/react</div>  </CollapsibleContent></Collapsible>

Props

PROPTYPEDEFAULTDESCRIPTION
openboolean—Controlled open state
onOpenChange(open: boolean) => void—Called when open state changes
defaultOpenbooleanfalseInitial open state (uncontrolled)
disabledbooleanfalseDisables the collapsible