Section

Use SectionTitle and SectionDescription for consistent section headings and supporting copy. Both forward HTML attributes; SectionTitle also accepts as to select the heading level.

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

<Section id="services">
  <SectionContainer>
    <SectionTitle>Services</SectionTitle>
    <SectionDescription>How we can help.</SectionDescription>
  </SectionContainer>
</Section>

For full page examples, browse the block examples.

---
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 } from "@/components/ui/section"

<Section>
  <SectionContainer>
    <h2 class="text-2xl font-semibold">Release notes</h2>
    <p>Use the container for the section content you want aligned.</p>
  </SectionContainer>
</Section>

Examples

---
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.
Use class on Section when a specific page needs custom vertical spacing.

Site-wide width, gutter, and spacing

Section, header, and banner read three CSS variables, so you can change their layout once in your stylesheet instead of on every block:

Variable	Default	Sets
`--container`	`80rem` (`max-w-7xl`)	Content width of the containers and floating variants.
`--gutter`	`--spacing(4)` (`px-4`)	Horizontal padding of the containers.
`--section-padding`	Set by your shadcn/ui style	Vertical padding of `Section`.

:root {
  --container: 1152px;
  --gutter: 1.5rem;
  --section-padding: 6rem;
}

A class on a component still wins over the variable, for example <Section class="py-8">. Components installed before these variables existed read them after you reinstall them.

API Reference

See the GitHub source code for more information on props.

Sidebar

Search