Section Spacer

The SectionSpacer component is a lightweight and reusable utility designed to add consistent vertical spacing between key sections of a webpage—like Hero, Features, or FAQs.

Built with Tailwind CSS, it helps maintain visual harmony and layout consistency across all your pages.

Use it to keep your UI clean, structured, and easy to scan.

Section Spacer preview

1. Setup codes

Create a new file components/layouts/common/SectionSpacer.tsx, then paste the codes below

jsx
import React from "react";

import { cn } from "@/utils/cn";

const SectionSpacer = ({
  className,
  children,
  ...props
}: React.ComponentPropsWithoutRef<"section">) => {
  return (
    <section className={cn("relative mb-12 overflow-hidden md:mb-14", className)} {...props}>
      {children}
    </section>
  );
};

export default SectionSpacer;

2. Usages

Now you can use SectionSpacer component to wrap any main section in your page like: Hero Banner, Features, Call Out, FAQs, ... It will make same space between the sections.

jsx
<div className="bg-gray-100 py-4">
  <SectionSpacer>
    <Container>
      <div className="rounded-md bg-white p-4">Section 1</div>
    </Container>
  </SectionSpacer>

  <SectionSpacer>
    <Container>
      <div className="rounded-md bg-white p-4">Section 2</div>
    </Container>
  </SectionSpacer>

  <SectionSpacer>
    <Container>
      <div className="rounded-md bg-white p-4">Section 3</div>
    </Container>
  </SectionSpacer>
</div>

The UI like that

The SectionSpacer component is commonly used with the Container component to create a well-structured layout, ensuring consistent spacing between sections as well as even margins on the left and right.

jsx
<div className="bg-gray-100 py-4">
  <SectionSpacer>
    <Container>
      <HeroBanner />
    </Container>
  </SectionSpacer>

  <SectionSpacer>
    <Container>
      <Features />
    </Container>
  </SectionSpacer>

  <SectionSpacer>
    <Container>
      <FAQs />
    </Container>
  </SectionSpacer>

  <SectionSpacer>
    <Container>
      <FAQs />
    </Container>
  </SectionSpacer>
</div>