shadcn.io is not affiliated with official shadcn/ui
Trending Posts Blog Block for React
Six ranked stories in two columns of three on shared hairlines, each with a huge outline numeral and its move since last week, as an arrow and a number.
Installation
Overview
A trending list for React with Base UI, written for Tempoline, a fitness magazine. A centred header sits over six ranked stories on shared hairlines, two columns of three. Each cell sets its rank as a huge numeral drawn in outline (the first filled), with the move since last week under it: an arrow and a number, a dash, or "New", in foreground tones only and always in words for screen readers. The title is the cell's one link, with the author and reading time under it. It has no controls and no state, so it's a static server component. The ranks come from the readers each story had in seven days, and the readers are example data. It's built from Guides and Avatar. For magazines, news sites and blogs that want a "most read" shelf.
FAQ
Where do the ranks and the moves come from?
Nowhere typed by hand. Each story in STORIES has readers (this week) and lastRank (its place last week, 0 for a story that wasn't out yet). The file sorts by readers for the rank and subtracts it from lastRank for the move, so editing a count reorders the list and updates every arrow. The counts are example data; feed your own from analytics.
How are the outline numerals drawn?
Each numeral is one text element in a 40 by 56 SVG box with no fill and a 1.25 unit stroke in the foreground colour, so every numeral takes the same room and no theme can fade it. Rank 1 is filled. The SVG is decorative: the ol already numbers the stories, and a screen reader hears each move as words ("Up 3 places since last week").
Why does the first column hold ranks 1 to 3?
The list is one ol in rank order, laid out with grid-flow-col and three rows from sm up, so the first column reads 1, 2, 3 and the second 4, 5, 6, and the DOM order is the reading order. A phone shows one column.
How does it fit on a phone?
The cells stack in one column, the numeral gets smaller and the title wraps. The six cells take under two screens and nothing scrolls sideways at 320 pixels.
Related
- Pro
Author Leaderboard Blog
Authors and staffSix writers ranked by posts with a bar, a count and twelve weekly streak dots, and a This year / All time toggle that changes the figures and the order.
- Pro
Period Toggle Stats Blog
Stats and draftsA blog's own numbers: a 7, 30 or 90 day toggle swaps a strip of four figures and five ranked top posts with bars; the rows stay in place and take whichever post holds each rank.
- Pro
Latest Posts Blog
Featured storyJust published: the newest post as a lead band in large type with a pulsing dot and a New mark, three earlier posts as rows with unread dots, and a Mark all as read button.
- Pro
Tabs Layout Blog
Post listsA film-criticism reading list with three underline tabs, Latest, Popular and Editor's picks, each drawing a different row: dated rows, ranked rows with read counts, and rows with an editor's note.
- Pro
Cards Grid Blog
Card gridsThe six latest posts of an engineering blog as cards on shared hairlines: drawn greyscale covers, a category, the title as the card's one link, a one-line dek and a byline with the date and reading time.
- Pro
Single Open Accordion Blog
Post listsFour dev notes as a single-open accordion: each row shows its number, title, date and reading time, and the open row reveals the dek, the byline with its category and a Read post link.