Footer Mega

A full product footer: brand column with logo mark, tagline and a newsletter field with inline error and success states, four link columns that fold into accordions on phones, and a bottom bar with a system-status pill, social links, a language select, a light/dark/system switch and the legal row.

Tags: footer newsletter status language theme-switch accordion
Dependencies: @base-ui/react(npm, opens in a new tab)lucide-react(npm, opens in a new tab)

Props

Other props pass through to the root element.

brand*
string
Brand name, used beside the logo and in the copyright line.
brandHref
string
Default "/"
Where the brand mark links. Defaults to "/".
logo
React.ReactNode
A logo mark. Defaults to a monogram of the first letter.
tagline
React.ReactNode
columns*
FooterMegaColumn[]
newsletter
{ title?: React.ReactNode; description?: React.ReactNode; placeholder?: string …
Default {}
Newsletter copy; false hides the form.
onSubscribe
(email: string) => void | Promise<void>
Called with the email. Throw to show an error; resolve to show the success state.
status
FooterMegaStatus
Default {}
languages
{ value: string; label: string }[]
Default [{ value: "en", label: "English" }]
defaultLanguage
string
onLanguageChange
(value: string) => void
defaultTheme
FooterMegaTheme
Default "system"
onThemeChange
(theme: FooterMegaTheme) => void
The control only keeps local state; wire this to your theme provider.
socials
{ network: FooterMegaNetwork; href: string; label?: string }[]
Default []
legal
FooterMegaLink[]
Default []
copyright
React.ReactNode

Prop	Type	Default	Description
brand*	string	–	Brand name, used beside the logo and in the copyright line.
brandHref	string	"/"	Where the brand mark links. Defaults to "/".
logo	React.ReactNode	–	A logo mark. Defaults to a monogram of the first letter.
tagline	React.ReactNode	–
columns*	FooterMegaColumn[]	–
newsletter	{ title?: React.ReactNode; description?: React.ReactNode; placeholder?: string …	{}	Newsletter copy; `false` hides the form.
onSubscribe	(email: string) => void \| Promise<void>	–	Called with the email. Throw to show an error; resolve to show the success state.
status	FooterMegaStatus	{}
languages	{ value: string; label: string }[]	[{ value: "en", label: "English" }]
defaultLanguage	string	–
onLanguageChange	(value: string) => void	–
defaultTheme	FooterMegaTheme	"system"
onThemeChange	(theme: FooterMegaTheme) => void	–	The control only keeps local state; wire this to your theme provider.
socials	{ network: FooterMegaNetwork; href: string; label?: string }[]	[]
legal	FooterMegaLink[]	[]
copyright	React.ReactNode	–