Collapse

A simple show/hide wrapper — parent controls the open prop, content smoothly transitions with max-height and opacity.

Preview

Basic collapse

import { useState } from 'react'
import { Collapse } from '@/registry/ui-kit/tailwind-collapse/react'

function Example() {
  const [open, setOpen] = useState(false)
  return (
    <div>
      <button onClick={() => setOpen(!open)}>Toggle</button>
      <Collapse open={open}>
        <p className="mt-3 text-sm text-zinc-600">Hidden content revealed.</p>
      </Collapse>
    </div>
  )
}

Component API

Prop	Default	Description
`open`	`—`	Controls whether the content is visible.
`className`	`""`	Additional CSS classes for the collapse wrapper.

Source Code

"use client";

/* ── Collapse ── */

interface CollapseProps {
  open: boolean;
  className?: string;
  children: React.ReactNode;
}

function Collapse({ open, className = "", children }: CollapseProps) {
  return (
    <div
      className={`overflow-hidden transition-all duration-200 ${
        open ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
      } ${className}`}
    >
      {children}
    </div>
  );
}

export { Collapse };
export default Collapse;