Core / Layout

Section

Creates consistent vertical separation between page regions.

Live example

Small section spacing

Medium section spacing

Interactive preview using local sample data. Styling is intentionally left to the consuming project.

Usage

<Section spacing="lg">…</Section>

Adopt to your project

Keep this component semantically neutral. Use its documented props for behavior and className for project-specific spacing, width, typography, and visual treatment.

Accessibility

Use semantic section labels where the region needs a name.

API reference

Public attribute
`spacing`
`children`
`className`

The preview above uses a safe local fixture. Confirm exact TypeScript props when adapting it to your application.

Installation

Full library
pnpm install:project /absolute/path/to/your-project

Planned guided selection
Layout → Section