Collapsible

Work in progress

This collapsible component is a work in progress, use with caution.

Toggle me

This is a collapsible content. It is a panel that can be expanded and collapsed.

---
import { Button } from "@/components/ui/button"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import { Icon } from "@/components/ui/icon"
---

<Collapsible class="w-full max-w-xl gap-2">
  <CollapsibleTrigger>
    <span>Toggle me</span>
  </CollapsibleTrigger>
  <CollapsibleContent>
    <p>
      This is a collapsible content. It is a panel that can be expanded and
      collapsed.
    </p>
  </CollapsibleContent>
</Collapsible>

Installation

To install the collapsible component, run the following command:

npx shadcn@latest add @fulldev/collapsible

Usage

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

<Collapsible>
  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
  <CollapsibleContent>
    Yes. Free to use for personal and commercial projects. No attribution
    required.
  </CollapsibleContent>
</Collapsible>