sebs7n-ui

NavegaciónServer Component

import { Footer, FooterBottom, FooterContent, FooterGroup } from "sebs7n-ui/footer"

Ejemplos

El pie de un sitio

La contraparte del `Navbar` abajo: opaco como la barra global y translúcido sobre el wallpaper. `FooterGroup` arma cada columna; `FooterBottom`, la fila de abajo.

import { Footer, FooterBottom, FooterContent, FooterGroup } from "sebs7n-ui/footer"

function Site() {
  return (
    <div className="w-full overflow-hidden rounded-surface border border-separator">
      <Footer>
        <FooterContent maxWidth={960}>
          <div className="grid grid-cols-2 gap-x-6 gap-y-8 sm:grid-cols-3">
            {GROUPS.map((group) => (
              <FooterGroup key={group.title} title={group.title}>
                {group.links.map((link) => (
                  <a href="#ejemplos" key={link}>
                    {link}
                  </a>
                ))}
              </FooterGroup>
            ))}
          </div>
          <FooterBottom>
            <span>© 2026 Acme Facturación S.A.</span>
            <span>Rosario, Argentina</span>
          </FooterBottom>
        </FooterContent>
      </Footer>
    </div>
  )
}

Sobre el wallpaper

Adentro de `data-ambient` (lo pone `AppShell ambient`; acá, un degradé en su lugar) el pie es `material-translucent`, como las barras: el wallpaper se ve a través y el texto sigue a 4,5:1.

import { Footer, FooterBottom, FooterContent } from "sebs7n-ui/footer"

function OnWallpaper() {
  return (
    // Un degradé propio en vez de `bg-ambient`, que es el fondo de la ventana entera.
    <div
      className="flex h-64 w-full flex-col justify-end overflow-hidden rounded-surface border border-separator"
      data-ambient=""
      style={{ background: "radial-gradient(120% 90% at 20% 0%, #5e8cff 0%, #3a4fd8 45%, #1b1f5e 100%)" }}
    >
      <Footer>
        <FooterContent className="py-6">
          <FooterBottom className="border-t-0 pt-0">
            <span>© 2026 Acme Facturación S.A.</span>
            <a className="text-label-secondary hover:text-label hover:underline" href="#ejemplos">
              Términos
            </a>
          </FooterBottom>
        </FooterContent>
      </Footer>
    </div>
  )
}

Props

Generadas del TypeScript del paquete. Las propias del componente, más las heredadas del primitivo que tienen algo que explicar —marcadas «heredada de Base UI»—. El resto está en la línea «hereda de».

Footer

Hereda las props de <footer>.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—	Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana.

FooterBottom

Hereda las props de <div>.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—	Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana.

FooterContent

Hereda las props de <div>.

Prop	Tipo	Por defecto	Descripción
`maxWidth`	`number \| string`	—	El ancho de la columna del sitio (`1448`, `"80rem"`), como `NavbarContent`: el pie sigue a todo el ancho.
`style`	`CSSProperties`	—	Se suma al `maxWidth` de la columna; lo que pongas gana.
`className`	`string`	—	Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana.

FooterGroup

Hereda las props de <div>.

Prop	Tipo	Por defecto	Descripción
`title`*	`React.ReactNode`	—	El título del grupo («Producto»); nombra la lista.
`headingLevel`	`2 \| 3 \| 4 \| 5 \| 6`	`2`	El nivel del título: `2` (el default) o más, si el pie va debajo de los `<h2>` de la página.
`className`	`string`	—	Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana.

Teclado

Tab: Recorre los links en orden, grupo por grupo.

Accesibilidad

Es un <footer>: es el landmark contentinfo solo afuera de <main>, <article>, <section>, <aside> y <nav>. Ponelo como hermano de <main>, no adentro, o el lector no lo lista como pie de la página.
Cada FooterGroup es un título (<h2> por defecto; headingLevel para encajar en el esquema de la página) y una lista nombrada por él (aria-labelledby); cada hijo va en su <li>.
El texto es label y label-secondary, a 4,5:1 sobre surface-header y sobre el material translúcido en los cuatro tonos del wallpaper (test/contrast.test.ts). Los links tienen foco visible y subrayado al pasar: no dependen del color.

Reglas de uso

Opaco en surface-header y, adentro de data-ambient (AppShell ambient), material-translucent como las barras: nunca transparente del todo sobre el wallpaper. Con menos transparencia vuelve a opaco solo.
FooterContent maxWidth alinea el contenido con la columna del sitio, igual que NavbarContent. La grilla de columnas es de la app.
FooterGroup y FooterBottom son opcionales: una columna de links con título y la última fila chica (copyright, dirección, el ThemeSwitcher). Los <a> de un grupo toman el link secundario sin clases.
Server Component, solo por subpath (sebs7n-ui/footer).

Relacionados

Navbar TextLink