Footer

A responsive multi-column site footer.

Real use · multi-column site footer

Centered

Glass · footer over a colored page background

Using Footer

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path is complete for Footer — it needs no JavaScript, so the classes below are the whole story.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class footer, with 2 modifiers:

.footer
.footer-center
.footer-title

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react

import { Footer } from "@wizeworks/silicaui-react";

Props

Prop	Type	Required	Description
center	boolean	no	Center every column and its contents (single-row, centered footer).

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

Show source

import { Footer, FooterTitle, Link } from "@wizeworks/silicaui-react";
import { Section } from "../lib/Section";

export function FooterDemo() {
    return (
        <>
            <Section title="Real use · multi-column site footer">
                <Footer className="rounded-box border border-base-300 p-6">
                    <nav>
                        <FooterTitle>Product</FooterTitle>
                        <Link href="#">Features</Link>
                        <Link href="#">Pricing</Link>
                        <Link href="#">Changelog</Link>
                    </nav>
                    <nav>
                        <FooterTitle>Company</FooterTitle>
                        <Link href="#">About</Link>
                        <Link href="#">Careers</Link>
                        <Link href="#">Contact</Link>
                    </nav>
                    <nav>
                        <FooterTitle>Legal</FooterTitle>
                        <Link href="#">Terms</Link>
                        <Link href="#">Privacy</Link>
                    </nav>
                </Footer>
            </Section>

            <Section title="Centered">
                <Footer center className="rounded-box border border-base-300 p-6">
                    <div>
                        <p>© 2026 Silica UI — all rights reserved.</p>
                    </div>
                </Footer>
            </Section>

            <Section title="Glass · footer over a colored page background">
                <div
                    className="flex flex-col justify-end gap-24 rounded-box p-4"
                    style={{
                        backgroundImage:
                            "linear-gradient(135deg, var(--color-primary), var(--color-accent), var(--color-secondary))",
                    }}
                >
                    <Footer className="glass p-6">
                        <nav>
                            <FooterTitle>Product</FooterTitle>
                            <Link href="#">Features</Link>
                            <Link href="#">Pricing</Link>
                            <Link href="#">Changelog</Link>
                        </nav>
                        <nav>
                            <FooterTitle>Company</FooterTitle>
                            <Link href="#">About</Link>
                            <Link href="#">Careers</Link>
                            <Link href="#">Contact</Link>
                        </nav>
                        <nav>
                            <FooterTitle>Legal</FooterTitle>
                            <Link href="#">Terms</Link>
                            <Link href="#">Privacy</Link>
                        </nav>
                    </Footer>
                </div>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

Footer — lowers to <footer>, holding its children. Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("Footer", "footer", { /* props */ }, [/* children */]);
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "footer footer-primary" rather than passing a colour as a prop.

Takes children: yes
Hydrated by: nothing — this one is static markup

The full API for Footer, on every path, is available through the Silica MCP server.