Collapsible
The Collapsible component allows users to toggle the visibility of content, either collapsed or expanded.
The Collapsible component allows users to toggle the visibility of content, either collapsed or expanded.
Follow these simple steps to add the Collapsible component to your project:
Install Dependencies
pnpm add motion
Create a new file: components/motions/collapsible.tsx and copy the code below:
"use client";
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
const Collapsible = CollapsiblePrimitive.Root;
const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
export { Collapsible, CollapsibleTrigger, CollapsibleContent };Adjust the import paths in both files according to your project's structure.