Site Footer
Rodapé de site institucional com marca, colunas de links, redes sociais e copyright.
'use client';
import { AtSign, Mail, MessageCircle, Smile } from 'lucide-react';
import { SiteFooter } from '@/components/site-footer';
import { Link } from '@/components/ui/link';
export default function SiteFooterDemo() {
return (
<SiteFooter
className="rounded-xl border-t-0"
logo={
<span className="flex items-center gap-2">
<span className="flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
<Smile className="size-4" />
</span>
<span className="font-heading text-base font-semibold">Sorriso Pleno</span>
</span>
}
description="Odontologia completa no centro de Campinas. Rua Barão de Jaguara, 1200 — sala 34."
companyName="Clínica Sorriso Pleno"
columns={[
{
title: 'Tratamentos',
links: [
{ label: 'Clareamento', href: '#' },
{ label: 'Implantes', href: '#' },
{ label: 'Ortodontia', href: '#' },
{ label: 'Odontopediatria', href: '#' },
],
},
{
title: 'Clínica',
links: [
{ label: 'Sobre nós', href: '#' },
{ label: 'Equipe', href: '#' },
{ label: 'Convênios', href: '#' },
{ label: 'Trabalhe conosco', href: '#' },
],
},
{
title: 'Atendimento',
links: [
{ label: '(19) 3232-4545', href: 'tel:+551932324545' },
{ label: 'WhatsApp', href: 'https://wa.me/5519988887777', isExternal: true },
{ label: 'contato@sorrisopleno.com.br', href: 'mailto:contato@sorrisopleno.com.br' },
],
},
]}
socials={[
{ label: 'Instagram', href: 'https://instagram.com', icon: <AtSign /> },
{ label: 'WhatsApp', href: 'https://wa.me/5519988887777', icon: <MessageCircle /> },
{ label: 'E-mail', href: 'mailto:contato@sorrisopleno.com.br', icon: <Mail /> },
]}
bottomSlot={
<>
<span>CNPJ 12.345.678/0001-90</span>
<Link href="#" className="font-normal text-muted-foreground">
Política de privacidade
</Link>
</>
}
/>
);
}Instalação
npx shadcn@latest add @lenstech/site-footerUso
import { SiteFooter } from "@/components/site-footer"<SiteFooter
logo={<Logo />}
description="Odontologia completa no centro de Campinas."
companyName="Clínica Sorriso Pleno"
columns={[
{
title: "Tratamentos",
links: [
{ label: "Clareamento", href: "/clareamento" },
{ label: "Implantes", href: "/implantes" },
],
},
]}
socials={[{ label: "Instagram", href: "https://instagram.com/…", icon: <Instagram /> }]}
/>Exemplos
Simples
Com uma coluna e sem redes sociais — o copyright é gerado a partir de companyName e do ano atual.
'use client';
import { Glasses } from 'lucide-react';
import { SiteFooter } from '@/components/site-footer';
export default function SiteFooterSimple() {
return (
<SiteFooter
className="rounded-xl border-t-0"
logo={
<span className="flex items-center gap-2 font-heading text-base font-semibold">
<Glasses className="size-5" /> Ótica Visão Clara
</span>
}
description="Óculos de grau, solares e lentes de contato desde 1998."
companyName="Ótica Visão Clara"
columns={[
{
title: 'Loja',
links: [
{ label: 'Óculos de grau', href: '#' },
{ label: 'Solares', href: '#' },
{ label: 'Lentes de contato', href: '#' },
],
},
]}
/>
);
}Acessibilidade
Cada coluna é um <nav> rotulado pelo seu título, e os ícones de redes sociais usam label como
aria-label — escreva o nome da rede ("Instagram"), não "ícone". Redes sociais sempre abrem em nova aba;
nos links das colunas use isExternal: true para isso.
Quando usar
- Use no final de sites institucionais e landing pages, junto com o
Site Header. - Não use em sistemas internos — lá um rodapé mínimo (ou nenhum) funciona melhor; veja o
App Shell. - Coloque aqui links secundários (trabalhe conosco, política de privacidade) e dados legais (CNPJ) em
bottomSlot.
API
SiteFooter
Aceita as props de um <footer> (exceto children), mais:
Prop
Type