Newsletter components for React and Tailwind

Every issue that went out, readable on the web. The latest issue next to the sign up, a searchable list, drawn mail previews, one issue as a web page and a calendar of the year.

Latest issue
Searchable list
Mail previews
Web version
Calendar

Props and details

Latest issue

The newest issue large with a pulsing marker, the sign up beside it with readers and cadence, the issues before it in a row.

Open in Studio

Installv1.0.0

aiw add @ai-website/newsletter-archive

Brings along utils, kit, button, icon, input, reveal, motion, section

Usage

<NewsletterArchive variant="latest" name="…" readers="3,840" issues={[{ number, title, summary, date, href }]} onSubscribe={(email) => …} />

Source

Searchable list

Every issue with number, summary and date. The search marks the match, years switch with a gliding pill.

Open in Studio

Mail previews

Issues as drawn mail previews with their headline, they lift and tilt a little on hover. The sign up sits next to the heading.

Open in Studio

Web version

One issue as a web page with the mail header, contents that follow the reading position, the sign up with a circling light and the issues next to it.

Open in Studio

Installv1.0.0

aiw add @ai-website/newsletter-archive

Brings along utils, kit, button, icon, input, reveal, motion, section

Usage

<NewsletterArchive variant="reader" name="…" issues={[{ …, sections: [{ title, text: ["…"], link }] }]} />

Source

Calendar

A year as twelve months, each issue a dot, a line shows the busy months. A month opens its issues beside it, years switch above.

Newsletter

Similar components

Often combined with

Inline

Card

Split

Centered with light

Footer style

With benefits

With preview

Latest issue

Searchable list

Mail previews

Web version

Calendar

Similar components, Often combined with

Similar components

Often combined with