Collapsible

function Demo() {
  const [open, setOpen] = useState(false)
  return (
    <Collapsible open={open} onOpenChange={setOpen} className="w-full max-w-sm">
      <div className="flex items-center justify-between rounded-lg border border-border-strong px-4 py-2.5">
        <span className="text-sm font-medium">@stacklyui starred 3 repos</span>
        <CollapsibleTrigger asChild><Button size="sm" variant="ghost">{open ? "Hide" : "Show"}</Button></CollapsibleTrigger>
      </div>
      <CollapsibleContent className="mt-2 space-y-2">
        <div className="rounded-lg border border-border px-4 py-2 text-sm">@stacklyui/ui</div>
        <div className="rounded-lg border border-border px-4 py-2 text-sm">stackly-docs</div>
      </CollapsibleContent>
    </Collapsible>
  )
}
render(<Demo />)