Enhance your pages with a flexible and customizable PageHeading component. Perfect for React and Next.js applications, this component allows you to easily style and manage your page titles with Tailwind CSS. Learn how to create consistent, responsive headings that fit perfectly into your design.

Page Heading preview

1. Setup codes

Before setup please setup the cn function in my docs.

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

jsx
import React from "react";

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

const PageHeading = ({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) => {
  return (
    <h1
      className={cn(
        "font-display text-3xl tracking-tight text-slate-900 dark:text-white",
        className,
      )}
    >
      {children}
    </h1>
  );
};

export default PageHeading;

2. Usages

Now we can use PageHeading component for Title of the page (each page has only one title - one page heading).

jsx
import PageHeading from "@/components/typography/PageHeading";

...

<div className="flex flex-col justify-center gap-8">
  <PageHeading className="text-center">Account Information</PageHeading>
  <UserInfo />
</div>