Section

For full page examples, browse the block examples.

Launch checklist

Plan the next release

Keep copy, actions, and supporting details aligned in one predictable section.

01 Scope

02 Review

03 Ship

---
import { Button } from "@/components/ui/button"
import { Section, SectionContainer } from "@/components/ui/section"
---

<Section>
  <SectionContainer class="gap-6">
    <div class="flex max-w-2xl flex-col gap-3">
      <p class="text-primary text-sm font-medium">Launch checklist</p>
      <h2 class="text-3xl font-semibold tracking-tight">
        Plan the next release
      </h2>
      <p class="text-muted-foreground leading-7">
        Keep copy, actions, and supporting details aligned in one predictable
        section.
      </p>
    </div>
    <div class="border-border grid gap-3 border-t pt-6 sm:grid-cols-3">
      <p class="text-sm"><span class="font-medium">01</span> Scope</p>
      <p class="text-sm"><span class="font-medium">02</span> Review</p>
      <p class="text-sm"><span class="font-medium">03</span> Ship</p>
    </div>
    <div class="flex flex-wrap gap-3">
      <Button>Review plan</Button>
      <Button variant="outline">Open docs</Button>
    </div>
  </SectionContainer>
</Section>

Installation

npx shadcn@latest add @fulldev/section

Usage

import {
  Section,
  SectionContainer,
  SectionDescription,
  SectionTitle,
} from "@/components/ui/section"

<Section>
  <SectionContainer>
    <SectionTitle>Release notes</SectionTitle>
    <SectionDescription>
      Use the container for the section content you want aligned.
    </SectionDescription>
  </SectionContainer>
</Section>

Examples

Customer story

A quieter layout for long-form copy

Floating sections frame a focused slice of content without changing the page width contract.

"The section feels separate from the surrounding page, while still using the same layout rhythm."

---
import { Section, SectionContainer } from "@/components/ui/section"
---

<Section variant="floating">
  <SectionContainer class="gap-6">
    <div class="flex max-w-2xl flex-col gap-3">
      <p class="text-primary text-sm font-medium">Customer story</p>
      <h2 class="text-3xl font-semibold tracking-tight">
        A quieter layout for long-form copy
      </h2>
      <p class="text-muted-foreground leading-7">
        Floating sections frame a focused slice of content without changing the
        page width contract.
      </p>
    </div>
    <blockquote
      class="border-primary/40 text-muted-foreground border-l-2 pl-4 text-sm leading-6"
    >
      "The section feels separate from the surrounding page, while still using
      the same layout rhythm."
    </blockquote>
  </SectionContainer>
</Section>

Notes

Section controls spacing and surface treatment.
SectionContainer keeps the inner width and horizontal padding consistent.
SectionTitle renders the section heading with the shared type scale. Use as="h1" or as="h3" to change the heading level.
SectionDescription renders the supporting paragraph under a title.
Use class on Section when a specific page needs custom vertical spacing.

API Reference

See the GitHub source code for more information on props.

Sidebar

Search