Sticky Footer

Navigation 531

About

A modern, animated sticky footer with multi-column navigation, social media icons, Perfect for SaaS, fintech, startups, and business websites to enhance branding and user engagement.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Sticky Footer to your project and fits it to your theme.

Code

How Sticky Footer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from 'react';
import { StickyFooter } from "@/components/ui/sticky-footer";
import Lenis from '@studio-freight/lenis';
import { ArrowDownIcon } from 'lucide-react';

export default function DemoOne() {
	React.useEffect(() => {
		const lenis = new Lenis();

		function raf(time: number) {
			lenis.raf(time);
			requestAnimationFrame(raf);
		}

		requestAnimationFrame(raf);
	}, []);

	return (
		<div className="relative w-full">
			<div className="flex h-screen flex-col items-center justify-center gap-10">
				<h1 className="max-w-xl text-center">
					<span className="text-foreground/80 text-4xl font-semibold">
						example of
					</span>
					<br />
					<span className="text-5xl font-bold">Sticky Footer</span>
				</h1>
				<div className="flex items-center gap-2">
					<p>Scroll down</p>
					<ArrowDownIcon className="size-4" />
				</div>
			</div>
			<StickyFooter />
		</div>
	);
}