Footer Mega
Footers
Source and install need .
pnpm dlx shadcn@latest add @assembli/footer-minimalFooter Minimal
Compact site footer for products that don't need a sitemap: brand and tagline beside one row of links with hover underlines and an optional badge, then a bottom bar with copyright and legal links, a live status pill, a language select, a light/system/dark switch with a sliding thumb and arrow-key support, social icons and back to top. Each optional piece hides when unset.
Props
Other props pass through to the root element.
brand*
{ name: string; logo?: React.ReactNode; href?: string; tagline?: React.ReactNod…
links*
{ label: string; href: string; badge?: string }[]
legal
{ label: string; href: string }[]
Default
[]copyright
React.ReactNode
Defaults to "© <brand>". Pass the year yourself, e.g. "© 2026 Quillmark, Inc.".
status
{ label: string; href: string; tone?: "ok" | "degraded" | "down" }
A live status pill linking to your status page.
socials
FooterSocial[]
Default
[]locales
{ value: string; label: string }[]
Default
[]Language picker. Hidden without
onLocaleChange.locale
string
onLocaleChange
(value: string) => void
theme
FooterTheme
Default
"system"Light / system / dark switch. Hidden without
onThemeChange.onThemeChange
(theme: FooterTheme) => void
backToTop
boolean
Default
trueShows a back-to-top button.
| Description | |||
|---|---|---|---|
| brand* | { name: string; logo?: React.ReactNode; href?: string; tagline?: React.ReactNod… | – | |
| links* | { label: string; href: string; badge?: string }[] | – | |
| legal | { label: string; href: string }[] | [] | |
| copyright | React.ReactNode | – | Defaults to "© <brand>". Pass the year yourself, e.g. "© 2026 Quillmark, Inc.". |
| status | { label: string; href: string; tone?: "ok" | "degraded" | "down" } | – | A live status pill linking to your status page. |
| socials | FooterSocial[] | [] | |
| locales | { value: string; label: string }[] | [] | Language picker. Hidden without |
| locale | string | – | |
| onLocaleChange | (value: string) => void | – | |
| theme | FooterTheme | "system" | Light / system / dark switch. Hidden without |
| onThemeChange | (theme: FooterTheme) => void | – | |
| backToTop | boolean | true | Shows a back-to-top button. |
