Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/sshahaider/sticky-footerimport 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>
);
}