Modus UI

Notch Footer

Web (React)

A premium, animated footer component with a smooth curved pocket.

A premium, animated footer and call-to-action banner featuring a mathematically perfect curved notch pocket. Built with Framer Motion and Tailwind CSS. It is fully responsive and supports custom branding, dot grid indicators, and physics-based hover scaling out of the box.

Modus

Stop guessing about your digital experience with Modus

Installation

CLI

npx @modus-ui/cli add notch-footer

Manual

  1. Copy the code from the component tab.
  2. Create a file at components/notch-footer.tsx.
  3. Paste the code.

Usage

tsx
import { NotchFooter } from "@/components/notch-footer";

export default function Example() {
  const handleAction = () => {
    console.log("Action clicked!");
  };

  return (
    <NotchFooter
      title="Stop guessing about your digital experience with LogRocket"
      buttonText="Get started for free"
      onButtonClick={handleAction}
      bgColorClass="bg-gradient-to-r from-violet-600 via-indigo-600 to-purple-700"
      notchFillColor="hsl(var(--primary))" // Must match parent background color
    />
  );
}

Props

PropTypeDefaultDescription
titlestring"Stop guessing about your digital experience with Modus"The primary headline rendered inside the banner
buttonTextstring"Get started for free"Text inside the bottom outline action button
onButtonClick() => void-Callback function triggered when the CTA button is clicked
buttonHrefstring-Optional destination link for the button (turns it into an a tag)
logoReactNode-Custom logo element floating gracefully inside the notch pocket
bgColorClassstring"bg-primary"Tailwind class(es) setting the main banner's background
titleColorClassstring"!text-primary-foreground"Tailwind class(es) for the headline colour.
buttonColorClassstring"border-primary-foreground/20 hover:border-primary-foreground bg-primary-foreground/10 hover:bg-primary-foreground !text-primary-foreground hover:!text-primary"Tailwind class(es) for the button.
dotColorClassstring"bg-primary-foreground/30"Tailwind class(es) for the decorative dots.
notchFillColorstring"hsl(var(--background))"Hex color filling the notch overlay (should match your page background)
classNamestring-Additional CSS styling classes for the container

Comments

  • No comments yet.