Newsletter Issues
Newsletter landing block: subscribe form with reader count beside an archive of recent issues.
- Type: Content section
- Styles: Light, Minimal
- Licence: Charcoal UI Pro
About Newsletter Issues
Newsletter Issues sells a newsletter in one section: a serif name, a short pitch, an email form with a clear success state and avatars with the reader count, beside a list of recent issues and their reads.
It is a full-width content section for React and Tailwind CSS 4, in a light and minimal style. Preview it at any width above, then install it with one command.
When to use Newsletter Issues
- Newsletters and paid publications.
- Podcasts with show notes.
- Shops with weekly emails.
- Nonprofits and research groups.
How it is built
The form validates the email before confirming, and the name, pitch, cadence, count and issues are props.
It is composed from Avatar Group, Button, so installing it also installs those components, and you can restyle each one the same way you would on its own.
Goes well with Newsletter Issues
Newsletter Issues is part of 8 full templates, so you can see it in a finished page.
- Fernhouse template: Plants that arrive happy.
- Marginalia template: An independent bookshop, online.
- Off the Clock template: A home for a show and its listeners.
- The Margin template: A publication with paying readers.
- Fieldnotes template: Long reads, beautifully set.
- Cohort template: Sell a course like a creator.
- Archive template: A library people can search.
- Tideline template: A nonprofit site that raises money.
- Blog Grid: A React blog index with a wide featured post, grid and tag filters
- Blog Featured: A magazine-style React front with a serif lead story and most-read list
- Changelog: A React changelog with sticky version dates, screenshots and type filters
- Resources Library: A React resource library with type tabs, search and patterned tiles
- Avatar Group: Overlapping React avatars that fan apart on hover with names that spring up
- Button: An animated React button with six variants, spring press feedback and a width-stable loading state
Install Newsletter Issues
npx shadcn@latest add @charcoal/newsletter-issuesNewsletter Issues 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 Newsletter Issues 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
- Avatar Group: Overlapping avatars that fan apart on hover, with names that spring up above each one.
- Button: Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.