UI

Site Footer

Rodapé de site institucional com marca, colunas de links, redes sociais e copyright.

Instalação

npx shadcn@latest add @lenstech/site-footer

Uso

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.

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

Aceita as props de um <footer> (exceto children), mais:

Prop

Type

On this page