Astro Section Component

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 class="flex flex-col gap-4">
    <SectionTitle>Services</SectionTitle>
    <SectionDescription>How we can help.</SectionDescription>
  </SectionContainer>
</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="flex flex-col 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 class="flex flex-col gap-4">
    <h2 class="text-2xl font-semibold">Release notes</h2>
    <p>Use the container for the section content you want aligned.</p>
  </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="flex flex-col 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. It sets no layout of its own: add the flex or grid classes and gap your content needs, such as class="flex flex-col gap-8".
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.

Menu