GitHub

Collapsible

Installation

1. Install dependencies

npm install motion

2. Install collapsible

npx shadcn-animated add collapsible

Usage

1
import {
2
  Button,
3
  Collapsible,
4
  CollapsibleContent,
5
  CollapsibleTrigger,
6
} from "shadcn-animated";
7
import { ChevronDownIcon } from "lucide-react";
1
<div className="mx-auto w-xs h-50">
2
      <Collapsible className="max-w-md w-xs p-4 rounded-2xl  h-auto">
3
        <CollapsibleTrigger
4
          render={
5
            <Button variant="ghost" className="w-full text-lg">
6
              Product details
7
              <ChevronDownIcon className="ml-auto group-data-panel-open/button:rotate-180" />
8
            </Button>
9
          }
10
        />
11


12
        <CollapsibleContent className="flex flex-col items-start gap-2 p-2.5 text-sm">
13
          <div className="text-[16px] text-secondary-foreground">
14
            This panel can be expanded or collapsed to reveal additional
15
            content.
16
          </div>
17
          <Button size="lg">Learn More</Button>
18
        </CollapsibleContent>
19
      </Collapsible>
20
    </div>

Next