Product Footer
A product footer with grouped columns, a live status pill, link badges and accordion columns on mobile.
Overview
A complete footer for a product site: brand and tagline, four labelled link columns, optional badges such as “New” on fresh pages, and a bottom bar for copyright and legal links.
A status pill links to your status page, with a calm pulse when everything is fine and amber or red otherwise. On phones the columns become accordions, so the footer doesn’t turn into a long scroll of links.
Use it as the global footer of a marketing or docs site.
When to use
- Marketing and product pages that need a complete, responsive band of content.
When not to use
- Inside dense app screens, where a smaller component fits better.
Installation
pnpm dlx shadcn@latest add https://sundaeui.dev/r/site-footer.jsonnpx shadcn@latest add https://sundaeui.dev/r/site-footer.jsonyarn dlx shadcn@latest add https://sundaeui.dev/r/site-footer.jsonbunx --bun shadcn@latest add https://sundaeui.dev/r/site-footer.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy site-footer.tsx into components/sundae/.
- Make sure Tailwind scans that folder (v4 detects it automatically; v3 needs it in `content`).
- Import the component and use it as shown below.
Usage
import { SiteFooter } from '@/components/sundae/site-footer'
<SiteFooter brand={<Logo />} columns={columns} status={{ label: 'All systems normal', href: 'https://status.example.com', state: 'ok' }} legal={[{ label: 'Privacy', href: '/privacy' }]} />Props
| Prop | Type | Default |
|---|---|---|
brand*Logo or name. | ReactNode | — |
taglineOne-line description. | string | — |
columns*{ title, links: { label, href, badge? }[] }. | FooterColumn[] | — |
statusStatus pill. | { label, href, state: 'ok' | 'degraded' | 'down' } | — |
legalBottom-bar links. | { label, href }[] | — |
copyrightDefaults to © current year. | string | — |
Accessibility
- Each column is a labelled nav. Mobile toggles expose aria-expanded.
- The status pulse is removed for reduced motion.
Customization
- Change md:grid-cols-[1.4fr_repeat(4,…)] for more or fewer columns.
FAQ
- Is Product Footer free?
- Product Footer is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Product Footer?
- Run npx shadcn@latest add https://sundaeui.dev/r/site-footer.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Product Footer support keyboard and screen readers?
- Each column is a labelled nav. Mobile toggles expose aria-expanded. The status pulse is removed for reduced motion.
- Does Product Footer respect reduced motion?
- The status pulse is removed for reduced motion.
More like this
All sections →- Pro
Bento Features
Sections · Understated Margin Quote
Sections · Editorial- Pro
Ledger Pricing
Sections · Editorial - Pro
Billboard Hero
Sections · Brutalist - Pro
Newsletter CTA
Sections · Refined - Pro
Changelog Timeline
Sections · Editorial