Section

For elaborate examples, see the blocks page.

Section heading

This is a section component for organizing page content.

Action Action

---
import image from "@/assets/image-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={image} alt="Section Image" />
  </SectionContent>
</Section>

Installation

To install the section component, run the following command:

npx shadcn@latest add @fulldev/section

Usage

For elaborate examples, see the blocks page.

Examples

Default

Section heading

This is a section component for organizing page content.

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

<Section>
  <SectionContent>
    <SectionProse>
      <h3>Section heading</h3>
      <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 variant="floating">
  <SectionContent>
    <SectionProse>
      <h2>Section heading</h2>
      <p>This is a section component for organizing page content.</p>
    </SectionProse>
  </SectionContent>
</Section>