shadcn.io is not affiliated with official shadcn/ui
Related Posts Shared Topics Blog Block for React
A More like this strip: three related posts as cells on shared hairlines, each showing which of the current post's three topics it shares, with a tick on the shared ones and a count such as 2 of 3 topics in common.
Installation
Overview
A related-posts strip for React with Base UI, written for Cradlemoss, a parenting blog. A compact header names the post you just read and lists its three topics. Under it three related posts are cells on shared hairlines that run from rail to rail and end the block, closest first. Each cell shows the post's title as its one link, a one-line dek and the post's relation to those three topics: a topic it shares is an outline badge with a tick and a firm border, a topic it lacks is quiet text, and a line with three dots says "2 of 3 topics in common". Nothing relies on colour, and a screen reader hears "Shared" or "Not shared" before each topic. One column on a phone, three from md. It's built from Badge and Guides. For the end of an article, a sidebar or any "you might also like" list that wants to say why. The posts are fictional.
FAQ
How are the matches worked out?
Each related post lists the topics it shares in topics; the count, the dots and the badges are worked out from that and from the current post's CURRENT.topics. Keep the posts in order from most to least in common. A post that shares none would show three quiet words and "0 of 3 topics in common", so leave it out of the list.
How do I use more or fewer topics?
Change CURRENT.topics. The dots follow its length, and each cell lists every one of the current post's topics, shared or not. Three is the sweet spot: more makes a cell's row of topics wrap.
How do I tell shared from not shared without colour?
A shared topic has a tick and a darker border, an unshared one has neither, and both have hidden text before them ("Shared:" and "Not shared:"). The dots beside the count are decorative; the count is written out in words.
How does it fit on a phone?
One column, one cell under the other, each with the same content. The block is short: the three cells fit in about one and a half screens.
Related
- Pro
Recommendations Picker Blog
Reading toolsA Because you read picker: a Select chooses one of three reviews you read and four recommended reviews change with a drawn book spine, a thin match bar and a percentage, labelled as example data.
- Pro
Tag Popover Cards Blog
Card gridsThree post cells on shared hairlines, each with a drawn wood-grain cover and three tag chips; a post with more tags shows a +3 button that opens a popover of the rest as links with counts.
- Pro
Topic Cluster Diagram Blog
Topics and indexesA hub-and-spoke diagram of a topic cluster: the pillar guide at the hub of a drawn wheel, six topic links on the rim, and the cluster's posts as ruled rows beside it; on a phone a nested list with connectors.
- 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
Tag Cloud Blog
Topics and indexesA foraging blog's tag cloud: fourteen tags in five sizes derived from their post counts, each a toggle that lists its three latest posts in a fixed-height panel beside the cloud.
- Pro
Filter Chips Blog
Card gridsA coffee journal's archive with a ruled band of category chips and their counts over eight post cells: choosing a chip removes the other posts, a polite line says how many show, and the wall keeps its height.