Footer

The page footer: site links, contact links and a one-line legal note.

import { Footer } from "@meowerse/ui"; · source packages/ui/src/components/Footer.tsx

variants and states

this site's footer — the live preview uses this site's links, not the auth app's real defaults

props

prop	type	default	required
`className`	`string` extra class names to append.	—	no
`links`	`FooterLink[]` nav links; defaults to the auth app's set. Apps like meowsenger pass their own.	`DEFAULT_LINKS`	no
`legal`	`string` the legal/attribution line; defaults to the auth app's.	`DEFAULT_LEGAL`	no

css custom properties

variable	dark	light
`--c-fg`	`#ededeb`	`#1a1a1c`
`--c-fg-muted`	`#b3b3af`	`#46464a`
`--c-fg-subtle`	`#8c8c88`	`#5e5e5b`
`--c-line`	`#232326`	`#cfcec8`
`--control-height`	`44px`	same
`--fs-1`	`0.75rem`	same
`--fs-2`	`0.8125rem`	same
`--sp-3`	`12px`	same
`--sp-4`	`16px`	same
`--sp-5`	`24px`	same
`--sp-6`	`32px`	same

Classes: .mw-footer. Set any of these variables on an ancestor (or wrap a subtree in .mw-theme--dark / .mw-theme--light) to restyle just that part of a page.

usage

this site's footer

tsx

import { Footer } from "@meowerse/ui";

<Footer links={[{"label":"projects","href":"/#projects"},{"label":"ui docs","href":"/ui/"},{"label":"components","href":"/ui/components/"}]} legal="meowerse — a personal project by alxnko." />

html (needs @meowerse/ui/tokens.css)

<footer class="mw-footer"><nav class="mw-footer__links" aria-label="site"><a href="/#projects">projects</a><a href="/ui/">ui docs</a><a href="/ui/components/">components</a></nav><nav class="mw-contacts" aria-label="contact"><a href="mailto:aleksandrnyrko@gmail.com" class="mw-contacts__link"><svg class="mw-icon" data-icon="mail" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10"></path><path d="M3 7l9 6l9 -6"></path></svg><span class="sr-only">email</span></a><a href="https://t.me/ALXNK0" class="mw-contacts__link" target="_blank" rel="noreferrer noopener"><svg class="mw-icon" data-icon="brand-telegram" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 10l-4 4l6 6l4 -16l-18 7l4 2l2 6l3 -4"></path></svg><span class="sr-only">telegram (opens in a new tab)</span></a><a href="https://instagram.com/alxnko" class="mw-contacts__link" target="_blank" rel="noreferrer noopener"><svg class="mw-icon" data-icon="brand-instagram" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 8a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4l0 -8"></path><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path><path d="M16.5 7.5v.01"></path></svg><span class="sr-only">instagram (opens in a new tab)</span></a><a href="https://github.com/alxnko" class="mw-contacts__link" target="_blank" rel="noreferrer noopener"><svg class="mw-icon" data-icon="brand-github" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"></path></svg><span class="sr-only">github (opens in a new tab)</span></a><a href="https://linkedin.com/in/alxnko" class="mw-contacts__link" target="_blank" rel="noreferrer noopener"><svg class="mw-icon" data-icon="brand-linkedin" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 11v5"></path><path d="M8 8v.01"></path><path d="M12 16v-5"></path><path d="M16 16v-3a2 2 0 1 0 -4 0"></path><path d="M3 7a4 4 0 0 1 4 -4h10a4 4 0 0 1 4 4v10a4 4 0 0 1 -4 4h-10a4 4 0 0 1 -4 -4l0 -10"></path></svg><span class="sr-only">linkedin (opens in a new tab)</span></a></nav><p class="mw-footer__legal">meowerse — a personal project by alxnko.</p></footer>

The site links are a labelled navigation region ("site").
Every link is at least 44 px tall.

do and don't

do

Pass your app's own links and legal line.

don't

Don't put primary actions in the footer.