Section

For elaborate examples, see the blocks page.

Section heading

This is a section component for organizing page content.

Action Action

---
import placeholderImage from "@/assets/placeholder.webp"

import { Button } from "@/components/ui/button"
import { Image } from "@/components/ui/image"
import {
  Section,
  SectionActions,
  SectionContent,
  SectionProse,
} from "@/components/ui/section"
---

<Section>
  <SectionContent>
    <SectionProse>
      <h2>Section heading</h2>
      <p>This is a section component for organizing page content.</p>
    </SectionProse>
    <SectionActions>
      <Button>Action</Button>
      <Button variant="outline">Action</Button>
    </SectionActions>
    <Image class="rounded-lg" src={placeholderImage} alt="Section Image" />
  </SectionContent>
</Section>

Installation

To install the section component, run the following command:

pnpm dlx shadcn@latest add @fulldev-ui/section

Usage

For elaborate examples, see the blocks page.

Frames

The Section component supports the following frames:

• default - Fills width on every screen
• floating - Full width with floating effect (ring + rounded + offset)
• panel - Contained box with panel styling (filled background, rounded, bordered)
• box - Contained box with minimal styling (border only)

Examples

Default

Section heading

This is a section component for organizing page content.

---
import { Section, SectionContent, SectionProse } from "@/components/ui/section"
---

<Section>
  <SectionContent>
    <SectionProse>
      <h2>Section heading</h2>
      <p>This is a section component for organizing page content.</p>
    </SectionProse>
  </SectionContent>
</Section>

Floating

Section heading

This is a section component for organizing page content.

---
import { Section, SectionContent, SectionProse } from "@/components/ui/section"
---

<Section frame="floating">
  <SectionContent>
    <SectionProse>
      <h2>Section heading</h2>
      <p>This is a section component for organizing page content.</p>
    </SectionProse>
  </SectionContent>
</Section>

Panel

Section heading

This is a section component for organizing page content.

---
import { Section, SectionContent, SectionProse } from "@/components/ui/section"
---

<Section frame="panel">
  <SectionContent>
    <SectionProse>
      <h2>Section heading</h2>
      <p>This is a section component for organizing page content.</p>
    </SectionProse>
  </SectionContent>
</Section>

Box

Section heading

This is a section component for organizing page content.

---
import { Section, SectionContent, SectionProse } from "@/components/ui/section"
---

<Section frame="box">
  <SectionContent>
    <SectionProse>
      <h2>Section heading</h2>
      <p>This is a section component for organizing page content.</p>
    </SectionProse>
  </SectionContent>
</Section>

Split Layout

Two Column Layout

This is a section component with split layout for organizing page content.

---
import placeholderImage from "@/assets/placeholder.webp"

import { Image } from "@/components/ui/image"
import {
  Section,
  SectionContent,
  SectionProse,
  SectionSplit,
} from "@/components/ui/section"
---

<Section>
  <SectionContent>
    <SectionSplit>
      <SectionProse>
        <h2>Two Column Layout</h2>
        <p>
          This is a section component with split layout for organizing page
          content.
        </p>
      </SectionProse>
      <Image class="rounded-lg" src={placeholderImage} alt="Section Image" />
    </SectionSplit>
  </SectionContent>
</Section>

Spread Layout

Spread Layout

Action

---
import { Button } from "@/components/ui/button"
import { Icon } from "@/components/ui/icon"
import {
  Section,
  SectionActions,
  SectionContent,
  SectionProse,
  SectionSpread,
} from "@/components/ui/section"
---

<Section>
  <SectionContent>
    <SectionSpread>
      <SectionProse>
        <h2>Spread Layout</h2>
      </SectionProse>
      <SectionActions>
        <Button>
          Action
          <Icon name="arrow-right" />
        </Button>
      </SectionActions>
    </SectionSpread>
  </SectionContent>
</Section>