Footers are more than just the end of a page they’re a key part of your user experience.
It’s the final section users see, and it should feel like a natural extension of your design. A good footer builds trust, improves navigation, and gives users quick access to important links without friction.
If you're building with React, Next.js, and shadcn/ui, you don’t need to design one from scratch anymore.
Why Use Shadcn Footer Components
If you’re working on a React or Next.js project, chances are you’re already familiar with shadcn/ui.
Instead of building footers from scratch every time, you can use ready-made footer blocks and simply customize them to match your design system.
These components help you:
- Save development time
- Maintain design consistency
- Focus on functionality instead of layout
Just plug, customize, and ship 🚀
💡 Got a footer component built on shadcn to share?
Feel free to reach out on LinkedIn, Twitter, Peerlist or Facebook you prefer
I’d love to check it out and add it to this list.
Agency Footer Layout
A clean, multi-column footer designed for agencies.
Features
- Brand logo and summary
- Sitemap links
- Legal pages
- Contact details
- Social icons
Perfect for building trust and providing structured navigation.
👀 Live Preview • ⬇️ Get Code
import Logo from "@/assets/logo/logo";
import { Separator } from "@/components/ui/separator";
const TwitterIcon = () => (
<svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.791 2.188 8.46 5.996 5.58 2.188H1.408l4.984 6.518-4.723 5.399H3.69l3.646-4.166 3.187 4.166h4.068l-5.196-6.87 4.417-5.047zm-.71 10.707L3.77 3.335h1.2l7.23 9.56z" fill="currentColor" />
</svg>
);
const LinkedinIcon = () => (
<svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#footer01-linkedin-clip)">
<path d="M13.633 13.633h-2.37V9.92c0-.885-.017-2.025-1.234-2.025-1.235 0-1.424.965-1.424 1.96v3.778h-2.37V5.998H8.51v1.043h.031a2.5 2.5 0 0 1 2.246-1.233c2.403 0 2.846 1.58 2.846 3.637zM3.56 4.954a1.376 1.376 0 1 1 0-2.751 1.376 1.376 0 0 1 0 2.751m1.185 8.679H2.372V5.998h2.373zM14.815.001H1.18A1.17 1.17 0 0 0 0 1.154v13.691A1.17 1.17 0 0 0 1.18 16h13.635A1.17 1.17 0 0 0 16 14.845V1.153A1.17 1.17 0 0 0 14.815 0" fill="currentColor" />
</g>
<defs>
<clipPath id="footer01-linkedin-clip">
<path d="M0 0h16v16H0z" />
</clipPath>
</defs>
</svg>
);
const DribbbleIcon = () => (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#footer01-dribbble-clip)">
<path d="M15.942 4.242C12.683 7.617 8.333 8.7 1.874 9.117m16.25 1.583c-5.517-1.175-10.117.833-13.65 5.267M7.133 2.292c3.642 5 5 7.85 6.667 14.766M18.333 10a8.333 8.333 0 1 1-16.666 0 8.333 8.333 0 0 1 16.666 0" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</g>
<defs>
<clipPath id="footer01-dribbble-clip">
<path fill="currentColor" d="M0 0h20v20H0z" />
</clipPath>
</defs>
</svg>
);
const InstagramIcon = () => (
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#footer01-instagram-clip)">
<path d="M12 2.162c3.204 0 3.584.012 4.849.07 1.17.054 1.805.249 2.228.413.56.218.96.478 1.38.898s.68.82.898 1.38c.164.423.36 1.058.413 2.228.058 1.265.07 1.645.07 4.849s-.012 3.584-.07 4.849c-.053 1.17-.249 1.805-.413 2.228a3.7 3.7 0 0 1-.898 1.38c-.42.42-.82.68-1.38.898-.423.164-1.058.36-2.228.413-1.265.058-1.645.07-4.849.07s-3.584-.012-4.849-.07c-1.17-.053-1.805-.249-2.228-.413a3.7 3.7 0 0 1-1.38-.898c-.42-.42-.68-.82-.898-1.38-.164-.423-.36-1.058-.413-2.228-.058-1.265-.07-1.645-.07-4.849s.012-3.584.07-4.849c.054-1.17.249-1.805.413-2.228.218-.56.478-.96.898-1.38s.82-.68 1.38-.898c.423-.164 1.058-.36 2.228-.413 1.265-.058 1.645-.07 4.849-.07M12 0C8.741 0 8.332.014 7.052.072 5.775.131 4.902.333 4.14.63a5.9 5.9 0 0 0-2.126 1.384A5.9 5.9 0 0 0 .63 4.14c-.297.763-.5 1.635-.558 2.912C.014 8.332 0 8.741 0 12s.014 3.668.072 4.948c.059 1.277.261 2.15.558 2.912.307.79.717 1.459 1.384 2.126A5.9 5.9 0 0 0 4.14 23.37c.763.297 1.635.5 2.912.558C8.332 23.986 8.741 24 12 24s3.668-.014 4.948-.072c1.277-.059 2.15-.261 2.912-.558a5.9 5.9 0 0 0 2.126-1.384 5.9 5.9 0 0 0 1.384-2.126c.297-.763.5-1.635.558-2.912.058-1.28.072-1.689.072-4.948s-.014-3.668-.072-4.948c-.059-1.277-.261-2.15-.558-2.912a5.9 5.9 0 0 0-1.384-2.126A5.9 5.9 0 0 0 19.86.63c-.763-.297-1.635-.5-2.912-.558C15.668.014 15.259 0 12 0m0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324M12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8m7.846-10.406a1.44 1.44 0 1 1-2.88 0 1.44 1.44 0 0 1 2.88 0" fill="currentColor" />
</g>
<defs>
<clipPath id="footer01-instagram-clip">
<path fill="currentColor" d="M0 0h24v24H0z" />
</clipPath>
</defs>
</svg>
);
type FooterData = {
title: string;
links: {
title: string;
href: string;
}[];
};
const footerSections: FooterData[] = [
{
title: "Sitemap",
links: [
{
title: "Contact us",
href: "#",
},
{
title: "About us",
href: "#",
},
{
title: "Work",
href: "#",
},
{
title: "Services",
href: "#",
},
{
title: "Pricing",
href: "#",
},
],
},
{
title: "Other Pages",
links: [
{
title: "Error 404",
href: "#",
},
{
title: "Terms & Conditions",
href: "#",
},
{
title: "Privacy Policy",
href: "#",
},
],
},
];
const Footer = () => {
return (
<footer className="py-10">
<div className="max-w-7xl xl:px-16 lg:px-8 px-4 mx-auto">
<div className="flex flex-col gap-6 sm:gap-12">
<div className="py-12 grid grid-cols-2 sm:grid-cols-4 md:grid-cols-7 lg:grid-cols-12 gap-x-8 gap-y-10 px-6 xl:px-0">
<div className="col-span-full lg:col-span-4">
<div className="flex flex-col gap-6 animate-in fade-in slide-in-from-bottom-10 duration-1000 delay-100 ease-in-out fill-mode-both">
{/* Logo */}
<a href="#">
<Logo />
</a>
<p className="text-base font-normal text-muted-foreground">
Empowering businesses with innovative solutions. Let's create
something amazing together.
</p>
{/* social links */}
<div className="flex items-center gap-4">
<a
href="#"
className="text-muted-foreground hover:text-foreground"
>
<TwitterIcon />
</a>
<a
href="#"
className="text-muted-foreground hover:text-foreground"
>
<LinkedinIcon />
</a>
<a
href="#"
className="text-muted-foreground hover:text-foreground"
>
<DribbbleIcon />
</a>
<a
href="#"
className="text-muted-foreground hover:text-foreground"
>
<InstagramIcon />
</a>
</div>
</div>
</div>
<div className="col-span-1 lg:block hidden"></div>
{footerSections.map(({ title, links }, index) => (
<div key={index} className="col-span-2">
<div className="flex flex-col gap-4 animate-in fade-in slide-in-from-bottom-10 duration-1000 delay-100 ease-in-out fill-mode-both">
<p className="text-base font-medium text-foreground">
{title}
</p>
<ul className="flex flex-col gap-3">
{links.map(({ title, href }) => (
<li key={title}>
<a
href={href}
className="text-base font-normal text-muted-foreground hover:text-foreground"
>
{title}
</a>
</li>
))}
</ul>
</div>
</div>
))}
<div className="col-span-3">
<div className="flex flex-col gap-4 animate-in fade-in slide-in-from-bottom-10 duration-1000 delay-100 ease-in-out fill-mode-both">
<p className="text-base font-medium text-foreground">
Contact Details
</p>
<ul className="flex flex-col gap-3">
<li>
<p className="text-base font-normal text-muted-foreground">
81 Rivington Street London EC2A 3AY
</p>
</li>
<li>
<a
href="mailto:contact@example.com"
className="text-base font-normal text-muted-foreground hover:text-foreground"
>
hello@shadcnspace.com
</a>
</li>
<li>
<a
href="tel:+01051923556"
className="text-base font-normal text-muted-foreground hover:text-foreground"
>
0105 192 3556
</a>
</li>
</ul>
</div>
</div>
</div>
<Separator orientation="horizontal" />
<p className="text-sm font-normal text-muted-foreground text-center animate-in fade-in slide-in-from-bottom-10 duration-1000 delay-100 ease-in-out fill-mode-both">
©2026 Shadcn Space. All Rights Reserved
</p>
</div>
</div>
</footer>
);
};
export default Footer;
Simple Shadcn Footer Block
A flexible footer with a clean and minimal layout.
Features
- Logo and tagline
- 1–4 columns of menu items
- Bottom row for copyright
- Policy links
Great for most general websites.
👀 Live Preview • ⬇️ Get Code
import { Logo, LogoImage, LogoText } from "@/components/shadcnblocks/logo";
import { cn } from "@/lib/utils";
interface MenuItem {
title: string;
links: {
text: string;
url: string;
}[];
}
interface Footer2Props {
logo?: {
url: string;
src: string;
alt: string;
title: string;
};
className?: string;
tagline?: string;
menuItems?: MenuItem[];
copyright?: string;
bottomLinks?: {
text: string;
url: string;
}[];
}
const Footer2 = ({
logo = {
src: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/block-1.svg",
alt: "blocks for shadcn/ui",
title: "Shadcnblocks.com",
url: "https://www.shadcnblocks.com",
},
className,
tagline = "Components made easy.",
menuItems = [
{
title: "Product",
links: [
{ text: "Overview", url: "#" },
{ text: "Pricing", url: "#" },
{ text: "Marketplace", url: "#" },
{ text: "Features", url: "#" },
{ text: "Integrations", url: "#" },
{ text: "Pricing", url: "#" },
],
},
{
title: "Company",
links: [
{ text: "About", url: "#" },
{ text: "Team", url: "#" },
{ text: "Blog", url: "#" },
{ text: "Careers", url: "#" },
{ text: "Contact", url: "#" },
{ text: "Privacy", url: "#" },
],
},
{
title: "Resources",
links: [
{ text: "Help", url: "#" },
{ text: "Sales", url: "#" },
{ text: "Advertise", url: "#" },
],
},
{
title: "Social",
links: [
{ text: "Twitter", url: "#" },
{ text: "Instagram", url: "#" },
{ text: "LinkedIn", url: "#" },
],
},
],
copyright = "© 2024 Shadcnblocks.com. All rights reserved.",
bottomLinks = [
{ text: "Terms and Conditions", url: "#" },
{ text: "Privacy Policy", url: "#" },
],
}: Footer2Props) => {
return (
<section className={cn("py-32", className)}>
<div className="container">
<footer>
<div className="grid grid-cols-2 gap-8 lg:grid-cols-6">
<div className="col-span-2 mb-8 lg:mb-0">
<div className="flex items-center gap-2 lg:justify-start">
<Logo url="https://shadcnblocks.com">
<LogoImage
src={logo.src}
alt={logo.alt}
title={logo.title}
className="h-10 dark:invert"
/>
<LogoText className="text-xl">{logo.title}</LogoText>
</Logo>
</div>
<p className="mt-4 font-bold">{tagline}</p>
</div>
{menuItems.map((section, sectionIdx) => (
<div key={sectionIdx}>
<h3 className="mb-4 font-bold">{section.title}</h3>
<ul className="space-y-4 text-muted-foreground">
{section.links.map((link, linkIdx) => (
<li
key={linkIdx}
className="font-medium hover:text-primary"
>
<a href={link.url}>{link.text}</a>
</li>
))}
</ul>
</div>
))}
</div>
<div className="mt-24 flex flex-col justify-between gap-4 border-t pt-8 text-sm font-medium text-muted-foreground md:flex-row md:items-center">
<p>{copyright}</p>
<ul className="flex gap-4">
{bottomLinks.map((link, linkIdx) => (
<li key={linkIdx} className="underline hover:text-primary">
<a href={link.url}>{link.text}</a>
</li>
))}
</ul>
</div>
</footer>
</div>
</section>
);
};
export { Footer2 };
Dark Themed Minimal Footer
A bold, dark-style footer designed to stand out.
Features
- Newsletter signup
- Strong CTA section
- Navigation links
- Legal pages
Ideal for SaaS, startups, or real estate websites.
👀 Live Preview • ⬇️ Get Code
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
export default function Footer() {
const footerLinks = [
{ label: "Home", href: "#" },
{ label: "Categories", href: "#" },
{ label: "Properties", href: "#" },
{ label: "Featured property", href: "#" },
{ label: "Testimonials", href: "#" },
{ label: "Blog", href: "#" },
{ label: "FAQs", href: "#" },
{ label: "404 page", href: "#" },
]
return (
<footer className="dark bg-background">
<div className="max-w-7xl mx-auto px-4 md:px-6 lg:px-8 md:py-24 py-8">
<div className="flex flex-col gap-16">
<div className="flex flex-col gap-12">
<div className='grid grid-cols-12 gap-6 animate-in fade-in slide-in-from-bottom-10 duration-1000 delay-100 ease-in-out fill-mode-both'>
<div className="col-span-12 md:col-span-3">
<p className='w-full text-foreground'>
Stay updated with the latest news, promotions, and exclusive offers.
</p>
</div>
<div className="md:col-span-1" />
<div className="col-span-12 md:col-span-8">
<div className='flex flex-col lg:flex-row gap-5 lg:gap-10'>
<form className='flex gap-2 flex-1'>
<Input
required
type="email"
name="email"
placeholder="enter your email"
className="rounded-full h-full py-2 text-white"
/>
<Button type='submit' className='h-auto py-2 px-4 rounded-full cursor-pointer font-medium hover:bg-primary/80'>
Subscribe
</Button>
</form>
<p className='text-sm flex-1 text-foreground'>
By subscribing, you agree to receive our promotional emails. You can unsubscribe at any time.
</p>
</div>
</div>
</div>
<Separator />
</div>
<div className="grid grid-cols-12 gap-6">
<div className="col-span-12 md:col-span-7 animate-in fade-in slide-in-from-bottom-10 duration-1000 delay-100 ease-in-out fill-mode-both">
<h2 className="sm:text-5xl text-3xl font-medium mb-6 text-foreground">
Begin your path to success contact us today.
</h2>
<Button className="py-3.5 px-6 rounded-full bg-teal-400 hover:bg-teal-400/80 h-auto">
Get in touch
</Button>
</div>
<div className="md:col-span-1" />
<div className="col-span-12 md:col-span-2 animate-in fade-in slide-in-from-bottom-10 duration-1000 delay-100 ease-in-out fill-mode-both">
<div className="flex flex-col gap-4">
{footerLinks.slice(0, 4).map((link) => (
<a
key={link.label}
href={link.href}
className="block text-base text-muted-foreground hover:text-primary"
>
{link.label}
</a>
))}
</div>
</div>
<div className="col-span-12 md:col-span-2 animate-in fade-in slide-in-from-bottom-10 duration-1000 delay-200 ease-in-out fill-mode-both">
<div className="flex flex-col gap-4">
{footerLinks.slice(4, 8).map((link) => (
<a
key={link.label}
href={link.href}
className="block text-base text-muted-foreground hover:text-primary"
>
{link.label}
</a>
))}
</div>
</div>
</div>
<div className="flex flex-col gap-12">
<Separator />
<p className="text-sm text-muted-foreground animate-in fade-in slide-in-from-bottom-10 duration-1000 delay-300 ease-in-out fill-mode-both">
©2026 Shadcn Space. All Rights Reserved
</p>
</div>
</div>
</div>
</footer>
)
}
Centered Footer Menu
This is centered layout footer for clean and balanced designs.
Features
- Center-aligned navigation
- Minimal layout
- Symmetrical structure
Best for simple and modern UI designs.
👀 Live Preview • ⬇️ Get Code
import Logo from "@/mynaui/Logo";
import { Dribbble, Github, Instagram, Threads } from "@mynaui/icons-react";
export default function Footer3() {
return (
<footer className="mx-auto max-w-7xl">
<div className="flex w-full flex-col items-center justify-center space-y-5 px-4 py-12 text-center">
<Logo />
<nav className="flex flex-col flex-wrap items-center space-y-4 text-xs font-medium text-muted-foreground sm:flex-row sm:space-x-4 sm:space-y-0">
<a href="#" className="hover:text-foreground">
Status
</a>
<a href="#" className="hover:text-foreground">
Contact
</a>
<a href="#" className="hover:text-foreground">
Docs
</a>
<a href="#" className="hover:text-foreground">
API
</a>
<a href="#" className="hover:text-foreground">
Privacy
</a>
<a href="#" className="hover:text-foreground">
Terms
</a>
</nav>
<nav className="flex items-center gap-4 text-muted-foreground">
<a href="#" target="_blank" rel="noreferrer noopener">
<Dribbble className="size-5" />
</a>
<a href="#" target="_blank" rel="noreferrer noopener">
<Github className="size-5" />
</a>
<a href="#" target="_blank" rel="noreferrer noopener">
<Instagram className="size-5" />
</a>
<a href="#" target="_blank" rel="noreferrer noopener">
<Threads className="size-5" />
</a>
</nav>
<p className="text-xs text-muted-foreground">© 2026 MynaUI, Inc.</p>
</div>
</footer>
);
}
Minimal Shadcn Footer
A lightweight footer with only essential links.
Features
- Clean and minimal UI
- Focus on important links only
- Fast and distraction-free
Perfect for landing pages and minimal websites.
👀 Live Preview • ⬇️ Get Code
import { FacebookIcon, InstagramIcon, TwitterIcon, YoutubeIcon } from 'lucide-react'
import { Separator } from '@/components/ui/separator'
import Logo from '@/components/shadcn-studio/logo'
const Footer = () => {
return (
<footer>
<div className='mx-auto flex max-w-7xl items-center justify-between gap-3 px-4 py-4 max-md:flex-col sm:px-6 sm:py-6 md:gap-6 md:py-8'>
<a href='#'>
<div className='flex items-center gap-3'>
<Logo className='gap-3' />
</div>
</a>
<div className='flex items-center gap-5 whitespace-nowrap'>
<a href='#' className='opacity-80 transition-opacity duration-300 hover:opacity-100'>
About
</a>
<a href='#' className='opacity-80 transition-opacity duration-300 hover:opacity-100'>
Features
</a>
<a href='#' className='opacity-80 transition-opacity duration-300 hover:opacity-100'>
Works
</a>
<a href='#' className='opacity-80 transition-opacity duration-300 hover:opacity-100'>
Career
</a>
</div>
<div className='flex items-center gap-4'>
<a href='#'>
<FacebookIcon className='size-5' />
</a>
<a href='#'>
<InstagramIcon className='size-5' />
</a>
<a href='#'>
<TwitterIcon className='size-5' />
</a>
<a href='#'>
<YoutubeIcon className='size-5' />
</a>
</div>
</div>
<Separator />
<div className='mx-auto flex max-w-7xl justify-center px-4 py-8 sm:px-6'>
<p className='text-center font-medium text-balance'>
{`©${new Date().getFullYear()}`}{' '}
<a href='#' className='hover:underline'>
shadcn/studio
</a>
, Made with ❤️ for better web.
</p>
</div>
</footer>
)
}
export default Footer
Shadcn Bento Footer
A modern, grid-style footer inspired by bento layouts.
Features
- Unique grid structure
- Modern UI style
- Flexible content sections
It doesn’t look like a traditional footer and that’s what makes it stand out.
👀 Live Preview • ⬇️ Get Code
import { Rainbow } from 'lucide-react'
import { Button } from '@repo/shadcn'
export const BentoFooter = () => {
return (
<footer className="w-full py-12">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
{/* Main Info Card */}
<div className="md:col-span-2 row-span-2 bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-8 flex flex-col justify-between">
<div>
<div className="size-10 rounded-xl bg-neutral-900 dark:bg-neutral-100 mb-6 flex items-center justify-center">
<Rainbow />
</div>
<h3 className="text-2xl font-bold tracking-tight text-neutral-950 dark:text-neutral-50 mb-4">
Start your journey today.
</h3>
<p className="text-neutral-500 dark:text-neutral-400 text-pretty leading-relaxed">
Empowering founders and teams with the fastest development
cycles in the industry.
</p>
</div>
<div className="mt-12 flex gap-4">
<Button className="px-6 py-2.5 bg-neutral-900 dark:bg-neutral-100 text-white dark:text-neutral-900 rounded-lg text-sm font-semibold hover:bg-neutral-800 dark:hover:bg-neutral-200 transition-colors">
Get Started
</Button>
<Button className="px-6 py-2.5 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 text-neutral-900 dark:text-neutral-50 rounded-lg text-sm font-semibold hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors">
Book Demo
</Button>
</div>
</div>
{/* Social Card */}
<div className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-6 flex flex-col justify-between">
<span className="text-xs font-bold uppercase tracking-widest text-neutral-400 dark:text-neutral-600">
Connect
</span>
<div className="flex flex-wrap gap-2 mt-4">
{['Twitter', 'GitHub', 'LinkedIn', 'Discord'].map((item) => (
<a
key={item}
href="#"
className="px-3 py-1 bg-neutral-100 dark:bg-neutral-800 rounded-full text-xs font-medium hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors"
>
{item}
</a>
))}
</div>
</div>
{/* Newsletter Card */}
<div className="bg-neutral-900 dark:bg-neutral-100 rounded-2xl p-6 flex flex-col justify-between">
<span className="text-xs font-bold uppercase tracking-widest text-neutral-400 dark:text-neutral-600">
Join the Circle
</span>
<div className="mt-4">
<p className="text-sm text-neutral-400 dark:text-neutral-600 mb-4">
Weekly insights delivered.
</p>
<div className="relative">
<input
type="email"
placeholder="Email address"
className="w-full bg-neutral-800 dark:bg-neutral-200 border-none rounded-lg px-3 py-2 pr-10 text-sm text-white dark:text-neutral-900 focus:ring-1 focus:ring-neutral-600 dark:focus:ring-neutral-400 mb-2"
/>
<Button className="absolute right-2 top-1.5 size-6 bg-neutral-600 dark:bg-neutral-700 rounded flex items-center justify-center hover:bg-neutral-500 dark:hover:bg-neutral-600 transition-colors">
<svg
className="size-3 text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M13 7l5 5m0 0l-5 5m5-5H6"
/>
</svg>
</Button>
</div>
</div>
</div>
{/* Location Card */}
<div className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-6 flex items-center gap-4">
<div className="size-10 rounded-lg bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center shrink-0">
<svg
className="size-5 text-neutral-500 dark:text-neutral-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</div>
<div>
<p className="text-sm font-bold text-neutral-950 dark:text-neutral-50">
San Francisco, CA
</p>
<p className="text-xs text-neutral-500 dark:text-neutral-400">
Global HQ
</p>
</div>
</div>
{/* Legal Card */}
<div className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-6 flex items-center justify-between">
<div className="flex gap-4">
<a
href="#"
className="text-xs font-medium hover:underline text-neutral-950 dark:text-neutral-50"
>
Privacy
</a>
<a
href="#"
className="text-xs font-medium hover:underline text-neutral-950 dark:text-neutral-50"
>
Terms
</a>
</div>
<span className="text-xs text-neutral-400 dark:text-neutral-600">
© 2024
</span>
</div>
</div>
</div>
</footer>
)
}
Final Thoughts
Footers are often the most overlooked part of a website but they’re one of the most important.
Common Use Cases
- Navigation links
- Contact information
- Legal pages
- Newsletter signup
Using pre-built shadcn footer components helps you:
- Save time
- Keep your UI consistent
- Ship faster
🚀 If you're looking for more components and shadcn UI components, check out this shadcn libraries for more shadcn resources.
Top comments (0)