Command Menu

Search documentation, components, and switch theme.

Fragments

Page Section

A compound component for organizing page content into distinct sections.

Formance
Docs

Installation#

npx shadcn@latest add @formance/page-section

Install the following dependencies:

npm install class-variance-authority

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import {
  PageSection,
  PageSectionMeta,
  PageSectionSummary,
  PageSectionTitle,
  PageSectionDescription,
  PageSectionAside,
  PageSectionContent,
} from '@/components/ui/page-section'
<PageSection>
  <PageSectionMeta>
    <PageSectionSummary>
      <PageSectionTitle>General</PageSectionTitle>
      <PageSectionDescription>
        Basic information about your organization.
      </PageSectionDescription>
    </PageSectionSummary>
  </PageSectionMeta>
  <PageSectionContent>
    {/* Section content */}
  </PageSectionContent>
</PageSection>

Examples#

Horizontal#

Use orientation="horizontal" for a side-by-side layout where the summary appears on the left and content on the right.

With Aside#

Compound Components

Compose the pieces you need:

<PageSection />Root container with orientation variants (vertical or horizontal).
<PageSectionMeta />Wraps summary and aside in a responsive row.
<PageSectionSummary />Groups title and description.
<PageSectionTitle />Section heading (h2).
<PageSectionDescription />Supporting text below the title.
<PageSectionAside />Container for section-level action buttons.
<PageSectionContent />Container for the main section content.