Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Blog blocks

Pro

Sortable Issue Archive Newsletter Blog Block for Svelte

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A newsletter archive for Svelte with Ark 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. The Select takes a list collection built from the three choices.

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.

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.

How does it fit on a phone?

The big numeral stays at the start of each row and the subject sits beside it, with the date and the open-rate bar stacked under the subject. The Select sits under the header at full width.

Does it work right to left?

Yes. The rows and the header mirror, dates and counts are isolated with bdi, and the numerals and the bar keep their direction.

All 100 blog blocks