Layout

Section wrapper

Semantic section wrapper that groups blocks without adding spacing or visual treatment.

Install

npx shadcn@latest add @alix/sectionWrapper

Preview

Advisory

Block spacing stays inside the block itself.

Implementation

The wrapper only gives the group one semantic section.

Usage

<SectionWrapper>
  <TextAndMediaBlock {...intro} />
  <TextAndMediaBlock {...detail} />
  <MediaBannerBlock {...banner} />
</SectionWrapper>

Examples

Spacing stays inside each block

The wrapper adds no padding or gap of its own, so stacked blocks keep the gutters their own designs specify, and never double them.

Turnaround and restructuring

This block owns its own p-6; the wrapper contributes none.

Performance improvement

A denser block carries a larger p-10: its choice, not the wrapper's.

<SectionWrapper>
  <div className="p-6">…</div>
  <div className="bg-[#1b3644] p-10">…</div>
</SectionWrapper>

A labelled landmark

Because it renders a real <section>, it takes native attributes. Point aria-labelledby at a heading to name the region for assistive tech.

Capabilities

The heading names the section; the blocks that follow fill it.

<SectionWrapper aria-labelledby="capabilities-heading">
  <h2 id="capabilities-heading">Capabilities</h2>
  <PostRowBlock {...posts} />
</SectionWrapper>

When to use it

Use it for

Grouping consecutive CMS blocks into one semantic <section> a block-renderer can map a section group onto.
Naming that region for assistive tech via aria-labelledby or aria-label; it forwards every native section attribute.
As the single future home for any section-level treatment, should the design ever grow one.

Reach for something else

Adding padding or gap here. Spacing belongs to the blocks inside; use their own props or a Stack.
Capping width or painting a surface: that is Container's job.
Wrapping a single block. With nothing to group, it only adds a redundant landmark.

Props

Prop	Type	Default	Description
section props	React.ComponentProps<"section">	–	Native section attributes only; spacing and surfaces remain owned by the blocks inside.