Footer — Sinapse Design System

import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'

export function FooterExample() {
  return (
    <footer className="grid gap-8 rounded-lg border p-6">
      <div className="grid gap-6 md:grid-cols-[1.4fr_1fr_1fr]">
        <p className="max-w-sm text-sm text-muted-foreground">
          Sinapse Design System reune tokens, fundamentos, componentes e guias
          de implementacao para produtos digitais.
        </p>

        <nav aria-label="Documentacao" className="grid gap-2 text-sm">
          <h3 className="font-medium">Documentacao</h3>
          <Button asChild variant="link" className="h-auto p-0">
            <a href="/comecar">Comece por aqui</a>
          </Button>
          <Button asChild variant="link" className="h-auto p-0">
            <a href="/fundamentos">Fundamentos</a>
          </Button>
          <Button asChild variant="link" className="h-auto p-0">
            <a href="/componentes">Componentes</a>
          </Button>
        </nav>

        <nav aria-label="Stacks" className="grid gap-2 text-sm">
          <h3 className="font-medium">Stacks</h3>
          <Button asChild variant="link" className="h-auto p-0">
            <a href="/desenvolver/react">React</a>
          </Button>
          <Button asChild variant="link" className="h-auto p-0">
            <a href="/desenvolver/vue">Vue 3</a>
          </Button>
          <span className="text-muted-foreground">HTML</span>
        </nav>
      </div>

      <Separator />

      <div className="flex flex-col gap-3 text-sm text-muted-foreground md:flex-row md:items-center md:justify-between">
        <a href="https://sinapse.org.br/">sinapse.org.br</a>
        <div className="flex flex-wrap gap-4">
          <a href="/termo-de-uso">Termo de Uso</a>
          <a href="/contato">Contato</a>
        </div>
      </div>
    </footer>
  )
}

<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
</script>

<template>
  <footer class="grid gap-8 rounded-lg border p-6">
    <div class="grid gap-6 md:grid-cols-[1.4fr_1fr_1fr]">
      <p class="max-w-sm text-sm text-muted-foreground">
        Sinapse Design System reune tokens, fundamentos, componentes e guias
        de implementacao para produtos digitais.
      </p>

      <nav aria-label="Documentacao" class="grid gap-2 text-sm">
        <h3 class="font-medium">Documentacao</h3>
        <Button as-child variant="link" class="h-auto p-0">
          <a href="/comecar">Comece por aqui</a>
        </Button>
        <Button as-child variant="link" class="h-auto p-0">
          <a href="/fundamentos">Fundamentos</a>
        </Button>
        <Button as-child variant="link" class="h-auto p-0">
          <a href="/componentes">Componentes</a>
        </Button>
      </nav>

      <nav aria-label="Stacks" class="grid gap-2 text-sm">
        <h3 class="font-medium">Stacks</h3>
        <Button as-child variant="link" class="h-auto p-0">
          <a href="/desenvolver/react">React</a>
        </Button>
        <Button as-child variant="link" class="h-auto p-0">
          <a href="/desenvolver/vue">Vue 3</a>
        </Button>
        <span class="text-muted-foreground">HTML</span>
      </nav>
    </div>

    <Separator />

    <div class="flex flex-col gap-3 text-sm text-muted-foreground md:flex-row md:items-center md:justify-between">
      <a href="https://sinapse.org.br/">sinapse.org.br</a>
      <div class="flex flex-wrap gap-4">
        <a href="/termo-de-uso">Termo de Uso</a>
        <a href="/contato">Contato</a>
      </div>
    </div>
  </footer>
</template>

<footer class="itps-footer">
  <div class="itps-footer__grid">
    <div class="itps-footer__summary">
      <p class="itps-footer__description">
        Sinapse Design System reune tokens, fundamentos, componentes e guias
        de implementacao para produtos digitais.
      </p>
    </div>

    <nav class="itps-footer__column" aria-label="Documentacao">
      <h3 class="itps-footer__column-title">Documentacao</h3>
      <ul class="itps-footer__list">
        <li><a href="/comecar" class="itps-footer__link">Comece por aqui</a></li>
        <li><a href="/fundamentos" class="itps-footer__link">Fundamentos</a></li>
        <li><a href="/componentes" class="itps-footer__link">Componentes</a></li>
      </ul>
    </nav>

    <nav class="itps-footer__column" aria-label="Stacks">
      <h3 class="itps-footer__column-title">Stacks</h3>
      <ul class="itps-footer__list">
        <li><a href="/desenvolver/react" class="itps-footer__link">React</a></li>
        <li><a href="/desenvolver/vue" class="itps-footer__link">Vue 3</a></li>
        <li><span class="itps-footer__text">HTML</span></li>
      </ul>
    </nav>
  </div>
</footer>

Instalação

Instale Button e Separator da sua stack e rode o comando individual ITpS em seguida. O comando itps add footer é theme-only: ele valida o slug e confirma que o contrato visual vem do tema ITpS, das classes copy-first e dos snippets desta página.

terminal · React/Next

pnpm dlx shadcn@latest add button separator
pnpm dlx github:ITPS/sinapse-ui-cli add footer

terminal · Vue3/Nuxt4

pnpm dlx shadcn-vue@latest add button separator
pnpm dlx github:ITPS/sinapse-ui-cli add footer

O comando individual adapta só este componente; não instala o catálogo inteiro.

Uso

Footer não tem primitive próprio no shadcn/ui. Em React/Next ou Vue3/Nuxt4, componha um <footer> semântico com Button asChild/as-child para links estilizados e Separator para dividir a linha legal.

Para HTML ou wrappers finos, use itps-footer. Esse é o contrato público do CSS copy-first e já inclui grid responsivo, texto de apoio, colunas de navegação e estados de foco nos links.

Exemplos

Estrutura

Peça	React/Next e Vue3/Nuxt4	HTML
Região	`<footer>`	`itps-footer`
Layout	grid com utilitários	`itps-footer__grid`
Resumo	texto semântico	`itps-footer__summary` + `itps-footer__description`
Coluna	`<nav aria-label>`	`itps-footer__column`
Título	heading local	`itps-footer__column-title`
Links	`Button asChild` / `Button as-child`	`itps-footer__link`
Texto não interativo	`<span>`	`itps-footer__text`
Divisão legal	`Separator`	`itps-footer__legal`

Legal e links

Use a linha legal quando o footer precisa expor site institucional, termos ou contato. Links continuam sendo anchors reais; itens informativos ficam como texto para evitar falsos alvos de foco.

<footer class="itps-footer">
  <div class="itps-footer__grid">
    <div class="itps-footer__summary">
      <p class="itps-footer__description">
        Diretrizes publicas para copiar CSS, validar interfaces e aplicar o
        sistema visual Sinapse em qualquer stack.
      </p>
    </div>

    <nav class="itps-footer__column" aria-label="Produto">
      <h3 class="itps-footer__column-title">Produto</h3>
      <ul class="itps-footer__list">
        <li><a href="/estilos" class="itps-footer__link">Estilos</a></li>
        <li><a href="/blocks" class="itps-footer__link">Blocos</a></li>
        <li><span class="itps-footer__text">Codigo aberto</span></li>
      </ul>
    </nav>

    <nav class="itps-footer__column" aria-label="Suporte">
      <h3 class="itps-footer__column-title">Suporte</h3>
      <ul class="itps-footer__list">
        <li><a href="/comecar" class="itps-footer__link">Instalacao</a></li>
        <li><a href="/desenvolver" class="itps-footer__link">Stacks</a></li>
        <li><a href="/componentes" class="itps-footer__link">Componentes</a></li>
      </ul>
    </nav>
  </div>

  <div class="itps-footer__legal">
    <a href="https://sinapse.org.br/" class="itps-footer__legal-text">
      sinapse.org.br
    </a>
    <ul class="itps-footer__legal-links">
      <li><a href="/termo-de-uso" class="itps-footer__link">Termo de Uso</a></li>
      <li><a href="/contato" class="itps-footer__link">Contato</a></li>
    </ul>
  </div>
</footer>

API copy-first

Classe/atributo	Uso
`itps-footer`	Região final da página com largura máxima e espaçamento responsivo.
`itps-footer__grid`	Organiza resumo e colunas de links.
`itps-footer__summary`	Limita a largura do texto institucional.
`itps-footer__description`	Texto de apoio do sistema, produto ou organização.
`itps-footer__column-title`	Heading curta para uma coluna de navegação.
`itps-footer__list`	Lista sem marcadores para links ou textos.
`itps-footer__link`	Anchor com cor, hover e foco do sistema.
`itps-footer__text`	Item informativo sem ação.
`itps-footer__legal`	Linha separada para organização, termos e contato.
`itps-footer__legal-text`	Link ou texto institucional da organização.
`itps-footer__legal-links`	Lista horizontal de links legais.
`aria-label`	Nomeia cada coluna de navegação.

Acessibilidade

Use <footer> apenas uma vez por página ou por região independente. Agrupe listas de links em <nav aria-label="..."> quando existirem várias colunas. Não use Button para navegação copy-first; use <a>. Nos snippets shadcn, Button asChild/as-child preserva o elemento <a> como destino real.