ContentSection

Section wrapper with optional title, actions, and collapsible state

Default

Usage

import { ContentSection } from '@tryvienna/ui'

<div className="w-96">
  <ContentProvider density="default">
    <ContentSection title="Project Details">
      <p className="text-sm text-muted-foreground">
        This section contains project configuration and metadata. Content is spaced according to
        the density context provided by ContentProvider.
      </p>
    </ContentSection>
  </ContentProvider>
</div>

Examples

Default

Default

<div className="w-96">
  <ContentProvider density="default">
    <ContentSection title="Project Details">
      <p className="text-sm text-muted-foreground">
        This section contains project configuration and metadata. Content is spaced according to
        the density context provided by ContentProvider.
      </p>
    </ContentSection>
  </ContentProvider>
</div>

Collapsible

Collapsible

<div className="w-96">
  <ContentProvider density="default">
    <ContentSection title="Advanced Settings" collapsible>
      <p className="text-sm text-muted-foreground">
        These are advanced settings that can be collapsed. Click the title to toggle visibility.
      </p>
      <p className="text-sm text-muted-foreground">
        Additional content that will be hidden when collapsed.
      </p>
    </ContentSection>
  </ContentProvider>
</div>

Collapsed By Default

Collapsed By Default

<div className="w-96">
  <ContentProvider density="default">
    <ContentSection title="Hidden Section" collapsible defaultCollapsed>
      <p className="text-sm text-muted-foreground">
        This content is hidden by default. Click the title to expand.
      </p>
    </ContentSection>
  </ContentProvider>
</div>

Loading

Loading

<div className="w-96">
  <ContentProvider density="default">
    <ContentSection title="Loading Data" loading skeletonCount={4}>
      <p>This content will not be shown while loading.</p>
    </ContentSection>
  </ContentProvider>
</div>

With Title Actions

With Title Actions

<div className="w-96">
  <ContentProvider density="default">
    <ContentSection
      title="Team Members"
      titleAction={
        <Button size="xs" variant="outline">
          Add Member
        </Button>
      }
    >
      <p className="text-sm text-muted-foreground">Alice, Bob, and Charlie are on this team.</p>
    </ContentSection>
  </ContentProvider>
</div>

API Reference

ContentSection

Prop	Type	Default	Description
title	string	-
titleAction	React.ReactNode	-
collapsible	boolean	-
defaultCollapsed	boolean	-
loading	boolean	-
skeletonCount	number	-

Data Attributes

Component	data-slot
ContentSection	"content-section"