---
type: doc
title: Section
description: A layout component for organizing page content into sections.
sidebar:
  badge:
    text: ⋅
    variant: success
---

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

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

```astro
---
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](/astro/blocks/).

```astro live props={{ name: 'section' }}
---
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

```bash
npx shadcn@latest add @fulldev/section
```

## Usage

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

```astro
<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

```astro live
---
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`.                         |

```css title="src/styles/global.css"
: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](https://github.com/fulldotdev/ui/tree/main/src/components/ui/section) for more information on props.