Is Newsletter Grid Footer free for commercial use?

Yes. Newsletter Grid Footer is MIT licensed, so you can use it in personal and commercial projects without attribution.

Is the newsletter footer semantic and safe for reduced motion?

Yes. It uses one footer landmark, separately labelled navigation regions, real anchors, and a native form with a visible email label, browser validation and a submit button. Decorative lines are hidden from assistive technology and ignore pointer input. Under reduced motion, every rule, link and control renders immediately in its final static state with no scroll-driven or underline movement.

How do I customise the density and grid lines?

Set density to compact or roomy to change cell padding, and set newsletterSpan to one or two for the large-screen newsletter width. Override --footer-newsletter-rule, --footer-newsletter-accent and --footer-newsletter-surface to retheme the grid through component tokens while text and controls continue to use semantic tokens.

Newsletter Grid Footer

A free newsletter footer with a native email form, labelled link grid and CSS-drawn architectural rules.

Customise

Density

Newsletter span

Code

<FooterNewsletterGrid
  logo={<span className="font-semibold">Northstar</span>}
  tagline="A calmer operating system for ambitious product teams."
  newsletter={{
    title: "Useful product notes, once a month",
    description: "Practical essays on planning, shipping and keeping momentum.",
    inputLabel: "Work email",
    placeholder: "you@company.com",
    buttonLabel: "Subscribe",
    action: "#newsletter-demo",
    method: "post",
  }}
  columns={[
    {
      heading: "Product",
      links: [
        { label: "Features", href: "#features" },
        { label: "Integrations", href: "#integrations" },
        { label: "Pricing", href: "#pricing" },
      ],
    },
    {
      heading: "Company",
      links: [
        { label: "About", href: "#about" },
        { label: "Journal", href: "#journal" },
        { label: "Careers", href: "#careers" },
      ],
    },
    {
      heading: "Resources",
      links: [
        { label: "Guides", href: "#guides" },
        { label: "Help centre", href: "#help" },
        { label: "Status", href: "#status" },
      ],
    },
    {
      heading: "Legal",
      links: [
        { label: "Privacy", href: "#privacy" },
        { label: "Terms", href: "#terms" },
        { label: "Cookies", href: "#cookies" },
      ],
    },
  ]}
  socialLinks={[
    { label: "LinkedIn", href: "#linkedin" },
    {
      label: "GitHub",
      href: "https://github.com/TemplateEmpire/te-components",
    },
    { label: "X", href: "#x" },
  ]}
  legal="© 2026 Northstar Ltd. All rights reserved."
/>

Newsletter Grid Footer is a free footer for Next.js and React, built with Tailwind as a responsive architectural grid containing a brand, grouped navigation, social links and a native email form.

The form submits directly to your action with browser email validation intact, while a progressive CSS view-timeline effect draws accent lines across the real bordered cells without moving any content.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/footer-newsletter-grid

Usage

import {
  FooterNewsletterGrid,
  type FooterNewsletterColumn,
  type FooterNewsletterConfig,
} from "@/components/footer-newsletter-grid";

const newsletter: FooterNewsletterConfig = {
  title: "Useful product notes, once a month",
  description: "Practical essays on planning, shipping and keeping momentum.",
  inputLabel: "Work email",
  placeholder: "you@company.com",
  buttonLabel: "Subscribe",
  action: "/newsletter",
  method: "post",
};

const columns: FooterNewsletterColumn[] = [
  {
    heading: "Product",
    links: [
      { label: "Features", href: "/features" },
      { label: "Integrations", href: "/integrations" },
      { label: "Pricing", href: "/pricing" },
    ],
  },
  {
    heading: "Company",
    links: [
      { label: "About", href: "/about" },
      { label: "Journal", href: "/journal" },
      { label: "Careers", href: "/careers" },
    ],
  },
  {
    heading: "Resources",
    links: [
      { label: "Guides", href: "/guides" },
      { label: "Help centre", href: "/help" },
      { label: "Status", href: "/status" },
    ],
  },
  {
    heading: "Legal",
    links: [
      { label: "Privacy", href: "/privacy" },
      { label: "Terms", href: "/terms" },
      { label: "Cookies", href: "/cookies" },
    ],
  },
];

export default function Page() {
  return (
    <FooterNewsletterGrid
      logo={<span className="font-semibold">Northstar</span>}
      tagline="A calmer operating system for ambitious product teams."
      newsletter={newsletter}
      columns={columns}
      socialLinks={[
        { label: "LinkedIn", href: "https://linkedin.com" },
        { label: "GitHub", href: "https://github.com" },
        { label: "X", href: "https://x.com" },
      ]}
      legal="© 2026 Northstar Ltd. All rights reserved."
    />
  );
}

Props

Prop	Type	Default	Description
logo	ReactNode	required	Brand slot rendered in the first prominent grid cell.
tagline	string	undefined	Optional brand sentence rendered beneath the logo.
newsletter	FooterNewsletterConfig	required	Newsletter heading, optional description, visible input label, optional placeholder, button label, native action and optional method and email field name.
columns	FooterNewsletterColumn[]	required	Two to five navigation groups. Each becomes a separately labelled nav with an h2 and textual anchors.
socialLinks	{ label: string; href: string }[]	[]	Optional textual links rendered inside one navigation named Social links.
legal	ReactNode	undefined	Optional copyright or legal content in the final grid cell.
density	"compact" \| "roomy"	"roomy"	Changes real grid-cell padding without changing motion.
newsletterSpan	1 \| 2	2	Newsletter cell span at the large breakpoint. It never changes DOM or focus order.
className	string	undefined	Additional classes merged onto the root footer.

Customisation

Use density and newsletterSpan for real grid geometry, then override --footer-newsletter-rule for neutral cell borders, --footer-newsletter-accent for the small drawn lines and underlines, and --footer-newsletter-surface for the opaque footer background.

<FooterNewsletterGrid
  className="northstar-footer"
  density="compact"
  newsletterSpan={1}
  logo={<NorthstarLogo />}
  newsletter={newsletter}
  columns={columns}
/>

.northstar-footer {
  --footer-newsletter-rule: var(--border);
  --footer-newsletter-accent: var(--primary);
  --footer-newsletter-surface: var(--background);
}

Frequently asked questions

Is Newsletter Grid Footer free for commercial use?: Yes. Newsletter Grid Footer is MIT licensed, so you can use it in personal and commercial projects without attribution.
Is the newsletter footer semantic and safe for reduced motion?: Yes. It uses one footer landmark, separately labelled navigation regions, real anchors, and a native form with a visible email label, browser validation and a submit button. Decorative lines are hidden from assistive technology and ignore pointer input. Under reduced motion, every rule, link and control renders immediately in its final static state with no scroll-driven or underline movement.
How do I customise the density and grid lines?: Set density to compact or roomy to change cell padding, and set newsletterSpan to one or two for the large-screen newsletter width. Override --footer-newsletter-rule, --footer-newsletter-accent and --footer-newsletter-surface to retheme the grid through component tokens while text and controls continue to use semantic tokens.

Related components

Want the full page this belongs to?Template Empire builds complete Next.js templates with navigation, content and conversion sections designed as one system.Explore Template Empire templates