Collapsible Card Section - Supabase

Use CollapsibleCardSection to progressively disclose optional or advanced fields inside a card or panel form. The trigger is styled mono-uppercase to blend with card section headings; content animates in and out on toggle.

Usage

tsx

import { CollapsibleCardSection } from 'ui-patterns/CollapsibleCardSection'

tsx

<CollapsibleCardSection title="Advanced settings"></CollapsibleCardSection>

With description

Use description to add a short qualifier below the title, only when the content needs context that the title alone doesn't provide.

tsx

<CollapsibleCardSection
  title="Advanced settings"
  description="These settings cannot be changed after creation"
>
</CollapsibleCardSection>

Default open

tsx

<CollapsibleCardSection title="Advanced settings" defaultOpen>
</CollapsibleCardSection>