# Modern SaaS Footer: Newsletter Footer

A full bleed footer with a title, lede and email signup over four quiet link columns, social glyphs and a legal row under a hairline.

- Page: https://www.shadcn-ui-blocks.com/blocks/modern-saas/footers/newsletter-footer
- Collection: [Modern SaaS](https://www.shadcn-ui-blocks.com/blocks/modern-saas), Premium tier
- Group: [Footers](https://www.shadcn-ui-blocks.com/blocks/modern-saas/footers)
- Created: 2026-11-02
- Preview image: https://www.shadcn-ui-blocks.com/blocks/modern-saas/footers/newsletter-footer.png

## Install

```bash
npx shadcn@latest add @shadcn-ui-blocks/modern-saas-footers-newsletter-footer
```

Needs an API key from a Pro or Team plan: add `@shadcn-ui-blocks` to the registries in components.json with the key as an `Authorization: Bearer` header. Setup: https://www.shadcn-ui-blocks.com/docs/shadcn-cli. The MCP server installs it without the setup: https://www.shadcn-ui-blocks.com/docs/mcp.

## Depends on

- npm packages: @icons-pack/react-simple-icons, class-variance-authority, radix-ui
- shadcn/ui components: brand-icons, depth-button
- Installs to: `@/components/blocks/modern-saas/footers/newsletter-footer`

## About this block

Newsletter Footer closes a page for an insights product. Its top row pairs a
short title and a two line lede with an email field and a primary pill. Under
it sit four equal link columns, the middle two holding a second group each,
with the social glyphs at the foot of the last column, and a hairline over the
legal row.

The type stays quiet: group headings are small and medium weight, links are
regular and muted, and no link carries a badge or an arrow.

## When to use

Use it on a product site with a lot to link to, such as resources, community
pages and topics, and a reason to collect email addresses. The signup sits in
the top row, so it is the first thing the footer offers.

A natural flow around it on a Modern SaaS page:

**Before**

- [CTAs](https://www.shadcn-ui-blocks.com/blocks/modern-saas/ctas) that ask for the sign up one last time
- [FAQs](https://www.shadcn-ui-blocks.com/blocks/modern-saas/faqs) to clear the final questions

## What you can customize

- **Columns.** Edit the `columns` array: each column holds one or more groups
  of a heading and its links. Keep every link to one line. On phones the
  groups sit two to a row in `mobileOrder`; list them so each pair has a
  similar number of links and the two columns end level.
- **Signup.** Change the title, lede, placeholder and pill label, and point
  the form at your mailing list.
- **Socials.** Edit `socials`. Instagram and YouTube come from
  `@icons-pack/react-simple-icons`; LinkedIn and Twitter are in
  `components/ui/brand-icons.tsx`.

> Tip: keep the column headings to one word each so all four line up on a
> single row at every width.

## More in Modern SaaS Footers

- [Brand Watermark](https://www.shadcn-ui-blocks.com/blocks/modern-saas/footers/brand-watermark)
- [Image CTA Footer](https://www.shadcn-ui-blocks.com/blocks/modern-saas/footers/image-cta-footer)
- [Simple](https://www.shadcn-ui-blocks.com/blocks/modern-saas/footers/simple)
- [Status Columns Footer](https://www.shadcn-ui-blocks.com/blocks/modern-saas/footers/status-columns-footer)