Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Related Posts Shared Topics Blog Block for Svelte

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.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A related-posts strip for Svelte with Ark 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.

Does it work right to left?

Yes. The cells run from the right, the ticks stay with their badges, and the count and dates are isolated with bdi.