The Margin: Newsletter template
A publication with paying readers.
For newsletters and paid publications: subscribe-first landing with an issue archive, a magazine front of recent pieces, a reader wall, paid tiers and FAQs.
About the The Margin template
The Margin is for newsletters with paying readers. Subscribe-first, with the issue archive beside the form, then a magazine front of recent essays, a reader wall, free and paid tiers and FAQs.
A publication with paying readers. It is a complete newsletter landing page for React and Tailwind CSS 4, assembled from 6 Charcoal UI sections.
Who The Margin is for
- Paid newsletters.
- Independent publications.
- Analyst and research letters.
- Creator essays.
What is inside
6 sections, top to bottom:
- Newsletter Issues: Newsletter landing block: subscribe form with reader count beside an archive of recent issues.
- Blog Featured: Magazine front with a serif lead story, a column of more stories and a numbered most-read list.
- Testimonials Tweets: Masonry wall of social posts that fades out at the bottom into a read-more button.
- Pricing Tiers: Three plans with a monthly/yearly switch; prices roll to the new amount and the popular plan glows.
- FAQ Grid: Questions laid out in a grid with a contact card, for short answers.
- Footer Minimal: One quiet row: brand, a few links and the year.
How it is built
No navbar by design: the subscribe form is the first thing readers see. Every section is a separate Charcoal UI section, so you can reorder, remove or restyle any of them, and the accent colour is one CSS variable on the page wrapper.
Install The Margin
npx shadcn@latest add @charcoal/marginTemplates are part of Charcoal UI Pro. One seat covers all 100 templates, 107 sections and 300 Pro components. The command installs the page and every section and component it uses, so it runs the moment it lands.
Frequently asked questions
- Can I use The Margin for a client site?
- Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
- Is The Margin a Next.js template?
- It is a React 19 page that works in Next.js (App Router or Pages Router), Vite, Remix and Astro. Drop it into a route and it renders.
Sections in this template
- Newsletter Issues: Newsletter landing block: subscribe form with reader count beside an archive of recent issues.
- Blog Featured: Magazine front with a serif lead story, a column of more stories and a numbered most-read list.
- Testimonials Tweets: Masonry wall of social posts that fades out at the bottom into a read-more button.
- Pricing Tiers: Three plans with a monthly/yearly switch; prices roll to the new amount and the popular plan glows.
- FAQ Grid: Questions laid out in a grid with a contact card, for short answers.
- Footer Minimal: One quiet row: brand, a few links and the year.