Collapsible

An interactive component that expands and collapses a panel.

@swiss starred 3 repositories

Installation

Add the collapsible component with the shadcn CLI.

bash

npx shadcn@latest add https://swiss.ui.unsanity.ai/r/collapsible.json

Usage

tsx

import { Collapsible } from "@/components/ui/collapsible"

Examples

Default

@swiss starred 3 repositories

import { ChevronRightIcon } from "lucide-react"

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

<Collapsible className="w-72">
  <CollapsibleTrigger render={<Button variant="ghost" size="icon-sm" />}>
    <ChevronRightIcon />
  </CollapsibleTrigger>
  <CollapsibleContent>Content</CollapsibleContent>
</Collapsible>