Footer
A site footer with logo, copyright, link row, and optional children section. Animates into view with Framer Motion.
Preview
Installation
npx shadcn@latest add @shadszn/footerFiles Installed
footer/footer.tsx-- Footer component
Key Features
- Fade-in animation triggered when footer scrolls into view
- Logo and copyright text on the left
- Configurable link list on the right
- Optional children slot for multi-column footer content
Usage
import { Footer } from "@/components/blocks/footer"
export default function Layout({ children }) {
return (
<div>
{children}
<Footer
logo={<span className="font-bold">MyApp</span>}
copyright="2025 MyApp Inc. All rights reserved."
links={[
{ label: "Privacy", href: "/privacy" },
{ label: "Terms", href: "/terms" },
{ label: "GitHub", href: "https://github.com" },
]}
/>
</div>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| logo | ReactNode | --- | Logo element displayed at the bottom left. |
| copyright | string | --- | Copyright text displayed next to the logo. |
| links | { label: string; href: string }[] | [] | Array of footer links displayed on the right. |
| children | ReactNode | --- | Optional content section above the bottom bar (e.g., multi-column links). |
| className | string | --- | Additional CSS classes for the footer element. |