Navigation: [/sitemap.md](/sitemap.md)

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

For full page examples, browse the [block examples](/blocks/).

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

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

## Usage

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

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

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

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/section) for more information on props.