A newsletter that confirms, what's new on an inset card, five columns that fold on phones, a live status with uptime, the language, a theme switch and a fading wordmark.
When to use
- A footer that's a page of its own: newsletter, what's new, five columns, a live status and the language.
- Larger product sites with many products, resources and a news cadence.
When not to use
- Small sites: its columns would be half empty; Columns footer.
- Apps: Simple footer.
Usage
Mega footer with your own data: every prop has the sample as its default, so pass only what you have.
import { MegaFooter } from "@/components/dashral/blocks/mega-footer"
<MegaFooter
brand="Acme"
onSubscribe={(email) => api.newsletter.subscribe(email)}
news={latestPost}
columns={footerColumns}
status={systemStatus}
/>API reference
MegaFooter
A website's whole footer: a newsletter sign-up that checks the address and confirms, what's new from the changelog on an inset card, five columns of links (folding sections on phones), and a bar with a live status — open it for each service and thirty days of uptime — the language, a theme switch that restyles the footer, and social links. A large wordmark fades out at the very end. Every part comes from props: point onSubscribe at your newsletter provider, and onLanguageChange / onThemeChange at your app's settings.
| Prop | Type | Default |
|---|---|---|
brand | stringYour name, by the logo, in the copyright line and as the wordmark. | "Acme" |
href | string | "#" |
newsletter | { title: string; note?: string } | nullThe newsletter's heading and the line under the field; null hides the sign-up. | sample |
onSubscribe | (email: string) => Promise<void> | voidYour newsletter provider, with the address once it looks right. Resolve to say it's done; throw an Error to show its message under the field. Without it, the footer plays a sample. | — |
news | { date: string; title: string; body: string; href?: string; label?: string } | nullThe card beside it: what's new, from the changelog; null hides it. | sample |
columns | FooterColumn[] | sample |
status | { label: string; services: FooterService[]; href?: string } | nullThe status pill and its popover: each service's uptime over thirty days; null hides it. | sample |
languages | string[]The languages offered and the one picked (picked by the footer without it); none hides the menu. | sample |
language | string | — |
onLanguageChange | (language: string) => void | — |
theme | FooterTheme | nullThe theme picked (picked by the footer without it, which then restyles itself); null hides the switch. | — |
onThemeChange | (theme: FooterTheme) => void | — |
copyright | stringThe copyright line (© this year and the brand without it). | — |
social | { label: string; path: string; href?: string }[] | sample |
type FooterColumn
| Prop | Type | Default |
|---|---|---|
title | string | — |
links | { label: string; href?: string; badge?: string }[] | — |
type FooterService
| Prop | Type | Default |
|---|---|---|
name | string | — |
uptime | string | — |
hiccup | number | — |
type FooterTheme
= "light" | "dark" | "system"