shadcn.io is not affiliated with official shadcn/ui
Sortable Issue Archive Newsletter Blog Block for React
A newsletter's back issues as rows with large mono issue numbers, subject lines, dates and an open-rate bar, with a Select that sorts them by newest, best opened or oldest.
Installation
Overview
A newsletter archive for React with Base UI, written for Sundial Letters, a weekly gardening letter. A start-aligned header carries a sort Select (Newest, Best opened, Oldest) at its end. Under it, six issues run as rows from rail to rail: the issue number in large mono numerals, which is the row's cover, the subject line as the row's one link, the send date and a bar for the share of readers who opened it. A band at the foot says which order is showing and the average open rate, worked out from the rows. It is built from Select and Guides. For a letter whose archive should show readers what they would get, and which issues did best. The open rates are example data.
FAQ
How does the sort work?
The Select holds one of three orders and the same six rows are re-ordered from typed data: newest by issue number, oldest the reverse, and best opened by open rate with the newer issue first on a tie. The block keeps its height, because it is always the same six rows, and a polite status line says which issue now comes first. It takes the three choices directly.
Where do the open rates come from?
They are example numbers in ISSUES (opened, a percentage). Feed it your own from your newsletter provider. The average in the foot band is the rounded mean of the rows, so it can never disagree with them.
What does a row link to?
The subject line is one link stretched over the whole row, so the row is one big target and one stop for a keyboard. href is a placeholder; point it at the web version of the issue.
How is the bar drawn?
A hairline track and a foreground fill whose width is the open rate, with the number beside it. It is artwork, so a right-to-left page keeps it as it is, and the number is in text for assistive technology.
Related
- Pro
Inline Subscribe Newsletter Blog
Subscribe and alertsAn end-of-post newsletter sign-up: an email field with the Subscribe button inside it, a message slot that never moves, and a confirmation that replaces the form in the same space.
- 1415161718Pro
Week Board Blog
Archives by dateA news digest's week as five columns, Monday to Friday, each with a huge day numeral and that day's posts or a quiet 'No post', in a snap scroller on phones.
- Pro
Email Digest Blog
Subscribe and alertsA morning briefing shown as the email it is: drawn mail chrome, four summaries and an unsubscribe line, with a Switch that turns them into monospaced plain text.
- Pro
Segmented Bar Recap Blog
Post listsA product team's weekly recap as five numbered posts under one segmented bar whose segments are as long as each post's reading time; pointing at a row lights its segment.
- Pro
Centered Newsletter Archive Hero
Signup and waitlistA centered newsletter hero with an email signup that confirms in place, over the four latest issues as links in one hairline grid between the rails.
- Pro
Nested Accordion Archive Blog
Archives by dateA farm journal's archive as a nested accordion, years that open to months and months that open to posts, with counts worked out from the posts and an Expand all control.