Section Heading

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

Create a new 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>

The UI like that

Hero Banner Section