Footer

A customizable footer component with support for multiple layouts, sections, navigation, and social links.

Installation

1. Dependencies

npm install clsx tailwind-merge

2. Paste inside @/lib/utils.ts

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: Parameters<typeof clsx>) {
  return twMerge(clsx(...inputs));
}

3. Copy Footer Code

Copy Footer Code

Footer Props

Name	Type	Required	Default	Description
variant	"default" \| "slim" \| "centered"	No	"default"	The layout style of the footer.
className	string	No	undefined	Additional class names for styling the footer.
children	React.ReactNode	Yes	undefined	Content to be displayed inside the footer.

FooterContainer Props

Name	Type	Required	Default	Description
className	string	No	undefined	Additional class names for styling the footer container.
children	React.ReactNode	Yes	undefined	Content to be displayed inside the footer container.

FooterSection Props

Name	Type	Required	Default	Description
className	string	No	undefined	Additional class names for styling the footer section.
children	React.ReactNode	Yes	undefined	Content to be displayed inside the footer section.

FooterGrid Props

Name	Type	Required	Default	Description
className	string	No	undefined	Additional class names for styling the footer grid.
children	React.ReactNode	Yes	undefined	Content to be displayed inside the footer grid.

FooterTitle Props

Name	Type	Required	Default	Description
className	string	No	undefined	Additional class names for styling the footer title.
children	React.ReactNode	Yes	undefined	The title text to display in the footer.

FooterNav Props

Name	Type	Required	Default	Description
className	string	No	undefined	Additional class names for styling the footer navigation.
children	React.ReactNode	Yes	undefined	Navigation links to display in the footer.

FooterNavItem Props

Name	Type	Required	Default	Description
className	string	No	undefined	Additional class names for styling the footer navigation item.
children	React.ReactNode	Yes	undefined	The content of the navigation item.
href	string	Yes	undefined	The URL the navigation item links to.

FooterSocial Props

Name	Type	Required	Default	Description
className	string	No	undefined	Additional class names for styling the social links container.
children	React.ReactNode	Yes	undefined	Social links to display in the footer.

FooterSocialItem Props

Name	Type	Required	Default	Description
className	string	No	undefined	Additional class names for styling the social link.
children	React.ReactNode	Yes	undefined	The content of the social link.
href	string	Yes	undefined	The URL the social link points to.

FooterDivider Props

Name	Type	Required	Default	Description
className	string	No	undefined	Additional class names for styling the divider.

FooterCopyright Props

Name	Type	Required	Default	Description
className	string	No	undefined	Additional class names for styling the copyright text.
children	React.ReactNode	No	undefined	Custom content for the copyright section.