Collapsible

An interactive component which expands/collapses a panel.

shadcn/ui docs →

Preview

@jsmith starred 3 repositories

@radix-ui/primitives

Installation

terminal
$
Other package managers 
bunx --bun shadcn@latest add https://trents.tech/r/collapsible.json

Dependencies: @radix-ui/react-collapsible

Usage

example.tsx
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import { Button } from "@/components/ui/button"
import { ChevronsUpDown } from "lucide-react"

const [isOpen, setIsOpen] = useState(false)

<Collapsible open={isOpen} onOpenChange={setIsOpen}>
  <div className="flex items-center justify-between">
    <h4>@jsmith starred 3 repositories</h4>
    <CollapsibleTrigger asChild>
      <Button variant="noShadow" size="sm">
        <ChevronsUpDown className="size-4" />
      </Button>
    </CollapsibleTrigger>
  </div>
  <CollapsibleContent className="space-y-2 mt-2">
    <div className="rounded-base border-2 border-border px-4 py-3">
      @radix-ui/primitives
    </div>
    <div className="rounded-base border-2 border-border px-4 py-3">
      @radix-ui/colors
    </div>
  </CollapsibleContent>
</Collapsible>
0