benflux/ui
Data Display

Collapse

A set of collapsible panels that can all be open simultaneously — unlike Accordion which limits to one. Supports accordion mode, ghost style, animated transitions, and extra content per panel.

Default (multiple open)

What is Benflux UI?

Benflux UI is a modern React component library built with Tailwind CSS and Framer Motion. It provides 80+ accessible, animated components for building beautiful interfaces.

Accordion mode (one open at a time)

What is Benflux UI?

Benflux UI is a modern React component library built with Tailwind CSS and Framer Motion. It provides 80+ accessible, animated components for building beautiful interfaces.

Ghost variant (no outer border)

Installation

npx benflux-ui add collapse

Controlled

"use client"
const [active, setActive] = useState<string[]>(["1"])

<Collapse
  activeKey={active}
  onChange={setActive}
  items={items}
/>

Custom expand icon

import { Plus, Minus } from "lucide-react"

<Collapse
  expandIcon={({ isActive }) =>
    isActive ? <Minus className="h-4 w-4" /> : <Plus className="h-4 w-4" />
  }
  expandIconPosition="end"
  items={items}
/>

Props — Collapse

PropTypeDefaultDescription
items*CollapseItem[]—Array of panel definitions
activeKeystring | string[]—Controlled open panels
defaultActiveKeystring | string[][]Initially open panels (uncontrolled)
onChange(keys: string[]) => void—Called when panels are opened or closed
accordionbooleanfalseOnly one panel can be open at a time
borderedbooleantrueShow outer border
ghostbooleanfalseTransparent background, individual panel borders
size"small" | "middle" | "large""middle"Padding size of headers and content
expandIcon({ isActive }: { isActive: boolean }) => ReactNode—Custom expand icon
expandIconPosition"start" | "end""start"Position of the expand icon

CollapseItem

interface CollapseItem {
  key: string
  label: ReactNode
  children: ReactNode
  extra?: ReactNode           // Extra content rendered in the header (right side)
  showArrow?: boolean         // Show/hide the expand arrow (default: true)
  collapsible?: "header" | "icon" | "disabled"
  forceRender?: boolean       // Keep content mounted even when collapsed
}