Footer Newsletter
Big footer led by a newsletter sign-up, then the sitemap, socials, theme toggle and live status.
- Type: Footer section
- Styles: Light, Enterprise
- Licence: Charcoal UI Pro
About Footer Newsletter
Footer Newsletter starts with a newsletter card, then the brand and socials, four columns of links, and a bottom row with the copyright, a live status line and a theme toggle.
It is a full-width footer section for React and Tailwind CSS 4, in a light and enterprise style. Preview it at any width above, then install it with one command.
When to use Footer Newsletter
- SaaS and developer platforms.
- Shops and publications.
- Events and festivals.
- Nonprofits.
How it is built
Uses Live Dot and Theme Toggle, and the columns, socials and status text are props.
It is composed from Live Dot, Theme Toggle, so installing it also installs those components, and you can restyle each one the same way you would on its own.
Goes well with Footer Newsletter
Footer Newsletter is part of 22 full templates, so you can see it in a finished page.
- Quill template: Ask your data, get answers.
- Halcyon template: Support that answers in seconds.
- Aperture template: Know what users do, and why.
- Lane template: Catch the bug in review, not in prod.
- Runway template: Push to deploy, in every region.
- Hexwork template: The framework, and the people behind it.
- Atelier template: A gallery that happens to have a checkout.
- Halo template: One product, every angle.
- Fernhouse template: Plants that arrive happy.
- Groove template: One great record, every month.
- Signal template: Sell out a conference.
- Fieldnotes template: Long reads, beautifully set.
- Frequency template: Listener-funded radio, live worldwide.
- Tally template: Cards, receipts and budgets in one place.
- Payline template: Accept money anywhere with one API.
- Nocturne template: A bedside device that fixes your nights.
- Quadrangle template: Programmes, people and open days.
- Commons template: Bring your members home.
- Tideline template: A nonprofit site that raises money.
- Campfire template: Group chat that stays readable.
- Kickstart template: Back the first production run.
- Relaunch template: Announce the big new version.
- Footer Columns: A free React footer with brand, four link columns and a newsletter field
- Footer Wordmark: A React footer with an enormous wordmark that rises into view
- Footer Minimal: A free minimal React footer: brand, a few links and the year
- Footer Contact: A studio React footer with a giant email link, hours and live local time
- Live Dot: A React presence dot with a pulsing halo for live, busy, away and offline
- Theme Toggle: A React dark mode toggle: the sun eclipses into a moon and the theme spreads out
Install Footer Newsletter
npx shadcn@latest add @charcoal/footer-newsletterFooter Newsletter is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.
Frequently asked questions
- Does Footer Newsletter work with Next.js?
- Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
- Can I change the copy and colours?
- Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.
Built from
- Live Dot: A presence dot with a pulsing halo in the four states an indicator needs: live, busy, away, offline. CSS only.
- Theme Toggle: The sun eclipses into a moon, and the new theme spreads from the button as a circle.