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.
Installation
CLI
npx @modus-ui/cli add notch-footerManual
- Copy the code from the component tab.
- Create a file at
components/notch-footer.tsx. - Paste the code.
Usage
tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Stop guessing about your digital experience with Modus" | The primary headline rendered inside the banner |
buttonText | string | "Get started for free" | Text inside the bottom outline action button |
onButtonClick | () => void | - | Callback function triggered when the CTA button is clicked |
buttonHref | string | - | Optional destination link for the button (turns it into an a tag) |
logo | ReactNode | - | Custom logo element floating gracefully inside the notch pocket |
bgColorClass | string | "bg-primary" | Tailwind class(es) setting the main banner's background |
titleColorClass | string | "!text-primary-foreground" | Tailwind class(es) for the headline colour. |
buttonColorClass | string | "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. |
dotColorClass | string | "bg-primary-foreground/30" | Tailwind class(es) for the decorative dots. |
notchFillColor | string | "hsl(var(--background))" | Hex color filling the notch overlay (should match your page background) |
className | string | - | Additional CSS styling classes for the container |
Comments