CollapsibleCard

pattern

Expandable card composed from Card + Collapsible. The Collapsible auto-bleeds inside the Card via CardPaddingContext — just wrap and it works. Use hoverable on the Card for hover lift without making it interactive. Works with all five card variants; combo gives a two-tone layout with a nested elevated Card.

"Create a CollapsibleCard using lucent-ui by wrapping a Collapsible inside a Card with hoverable. The Collapsible auto-bleeds to fill the card body — no extra padding props needed."

Usage

React / JSX

import { Card, Collapsible } from 'lucent-ui'

<CollapsibleCard Card variant="outline" />

Installation

pnpm add lucent-ui

API Reference

CollapsibleCard props — * required

Prop	Type	Default	Description
`Card variant`	`"ghost" \| "outline" \| "filled" \| "elevated" \| "combo"`	`"outline"`	Elevation level of the outer card.
`Card hoverable`	`boolean`	`false`	Enables hover lift and neutral glow without making the card a button or link.
`Card status`	`"success" \| "warning" \| "danger" \| "info"`	—	Colored left-edge accent bar.
`Collapsible trigger`*	`React.ReactNode`	—	Always-visible trigger element.
`Collapsible defaultOpen`	`boolean`	`false`	Start in expanded state.
`Collapsible disabled`	`boolean`	`false`	Prevent toggling.

← PreviousEmptyStateCard Next →SettingsPanel

CollapsibleCard

All variants

Composed layouts

Usage

Installation

API Reference