Yami

Collapsible

An interactive component that expands and collapses a panel.

@yami starred 3 repositories

Installation

Add the collapsible component with the shadcn CLI.

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

Usage

import { ChevronRightIcon } from "lucide-react"

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

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

Examples

Default

@yami starred 3 repositories

Code

import { ChevronRightIcon } from "lucide-react"

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

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