SectionHeading Component – Stylish Section Titles for React and Next.js with Tailwind CSS

Elevate the design of your pages with a customizable SectionHeading component. Perfect for React and Next.js applications, this component allows you to style section titles consistently and responsively with Tailwind CSS. Learn how to make your page sections stand out with ease and elegance.

Section Heading preview

Hero Banner Section

Please install everything that's required

Before setup and using this component, please install all the required dependencies from this link (if you have never installed).

1. Setup codes

Before setup please setup the cn function in my docs.

Create a new Card component components/ui/typography/SectionHeading.tsx

jsx
import React from "react";

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

const SectionHeading = ({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) => {
  return <h2 className={cn("text-2xl", className)}>{children}</h2>;
};

export default SectionHeading;

2. Usages

Now we can use SectionHeading component for each of section like: Hero section, Features section, FAQs section, ...

jsx
import SectionHeading from "../typography/SectionHeading";

...

<SectionHeading>Section 1</SectionHeading>
<SectionHeading>Section 2</SectionHeading>