Section

A semantic structural group with optional header, content, footer, surface, and direct-child dividers.

Use Section to organize related settings or controls under one heading. Use Card when the content represents a discrete object with its own boundary, elevation, selection, or interaction state.

Notifications

Choose how project updates reach you.

Email updates

Receive a weekly summary.

Push notifications

Receive timely alerts.

Settings section

Installation

$npx shadcn@latest add @patchui/section

The copied source is available in the registry JSON. The canonical implementation lives in packages/react/src/components/section.tsx.

Usage

<Section variant="card" dividers>
  <SectionHeader className="p-5">
    <SectionTitle>Notifications</SectionTitle>
    <SectionSubtitle>Choose how updates reach you.</SectionSubtitle>
  </SectionHeader>
  <SectionContent>...</SectionContent>
</Section>

Section is plain by default. Its slots provide semantics and styling hooks, while the caller owns padding, gaps, alignment, and responsive layout.

Composition

Section
├── SectionHeader
│   ├── SectionTitle
│   └── SectionSubtitle
├── SectionContent
└── SectionFooter

Every slot is optional. Keep the order predictable when several slots are used.

Examples

Plain structure

Use the default plain variant when spacing and typography already establish the grouping and another visible surface would add unnecessary chrome.

Project access

Workspace members can view this project by default.

Invite collaborators when they need editing permission.

Plain structure

API reference

Prop	Type	Default	Description
variant	"plain" \| "card"	"plain"	Adds no surface or a borderless radius-12 layer surface.
dividers	boolean	false	Adds a hairline between each pair of direct children.

Section and every structural slot support render to change the semantic element. SectionTitle defaults to h3; choose another heading level when required by the surrounding document outline.

Accessibility

Section renders a native section. Give it a heading when it represents a distinct document region.
Choose the SectionTitle heading level according to the page hierarchy, not its visual size.
Dividers are visual only and do not replace headings or labels.
Ensure controls inside setting rows retain visible labels and appropriate accessible names.