Header.tsx

The Header component is used to display a styled header with an optional label. It provides a visually appealing title for sections or pages within an application.

Example Usage

import { cn } from "@/lib/utils";
import { Poppins } from "next/font/google";
 
const font = Poppins({
  subsets: ["latin"],
  weight: ["600"],
});
 
interface HeaderProps {
  label?: string;
}
export const Header = ({ label }: HeaderProps) => {
  return (
    <div className="w-full flex flex-col gap-y-4 items-center justify-center">
      <h1
        className={cn("text-6xl font-semibold drop-shadow-sm", font.className)}
      >
        Auth
      </h1>
      <p className="text-muted-foreground text-sm">{label}</p>
    </div>
  );
};

Props

Name	Type	Description
`label`	`string`	The optional label for the header.

Additional Notes

The Header component provides a visually appealing title for sections or pages within an application.
Developers can customize the font and styling of the header using utility classes and font configurations.