# Section

> The outer wrapper of a section. It sets the element, the vertical spacing, and the link to the heading that names the section.

Facade UI item `section` (ui, atom).
Docs page: https://facadeui.dev/components/section · Registry JSON: https://facadeui.dev/r/section.json

## Install

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

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/section.json`. The CLI also installs what it needs: @facade/types, @facade/utils.

Files: `components/ui/section.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/section-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

```tsx
import { Container } from "@/components/ui/container"
import { Section } from "@/components/ui/section"
import { SectionHeader } from "@/components/ui/section-header"

export function Demo() {
  return (
    <Section
      spacing="sm"
      labelledBy="facade-a-named-band"
      className="bg-muted/40 rounded-xl"
    >
      <Container size="md">
        <SectionHeader
          eyebrow="Structure"
          title="A named band"
          description="Section pairs aria-labelledby with the id SectionHeader puts on the heading, so it becomes a real landmark instead of an unnamed region."
        />
      </Container>
    </Section>
  )
}
```

## Props

### SectionProps

Extends Omit<ComponentPropsWithoutRef<"section">, "children">, Pick<SectionBaseProps, "as" | "spacing">.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `labelledBy` | `string` |  | Id of the heading that names this section. Omit only when `as="div"`. |
| `children` | `ReactNode` |  |  |