Lucent UI
← TabsCollapsibleCommandPalette →
✦ LLM-ready

Collapsible

molecule

Expandable/collapsible content section with a trigger. Smooth height animation via direct DOM measurement (180ms), CSS-driven hover feedback with translucent tint, focus-visible ring, disabled state, and padded prop to control content spacing. Auto-bleeds inside Card by consuming CardPaddingContext — just wrap in a Card and it works. Dynamic overflow (hidden during animation, visible when resting) so nested shadows aren't clipped. Supports controlled and uncontrolled open state.

"Add a Collapsible from lucent-ui to reveal advanced settings. Pass a string as trigger and nest form fields as children."

Usage

React / JSX
import { Collapsible } from 'lucent-ui'

<Collapsible padded
  trigger={<Text weight="medium">Click to expand</Text>}
  defaultOpen>
  <Text size="sm" color="secondary">Collapsible content here.</Text>
</Collapsible>

Installation

pnpm add lucent-ui

API Reference

Collapsible props — * required

PropTypeDefaultDescription
trigger*React.ReactNode—The always-visible trigger element (string or JSX).
children*React.ReactNode—Content shown when expanded.
defaultOpenbooleanfalseUncontrolled initial open state.
openboolean—Controlled open state.
onOpenChange(open: boolean) => void—Called when open state changes.
disabledbooleanfalseReduces trigger opacity to 0.5, sets cursor: not-allowed, and prevents toggling.
paddedbooleantrueWhen false, removes built-in content padding so children (e.g. a nested Card) can provide their own spacing.
styleReact.CSSProperties—Inline styles for the wrapper.