Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Syndicated Filter Crosspost Blog Block for React

A studio blog's posts that first ran elsewhere: an Only syndicated Switch with a live count, rows with an outlet monogram and Read here and Read original links, and a canonical-link note.

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 cross-posted articles block for React with Base UI, written for Scrapwick, a design studio's blog. A start-aligned header carries an "Only syndicated" Switch and a live count ("4 of 6 posts shown") at its end. Under it, six posts run as rows rail to rail: the publisher's monogram, which is the row's cover and is drawn in type, the title, "Originally on Meadowvane Journal" with the first date and the reading time, and two links, Read here and Read original (the posts that never ran elsewhere have only the first). A band at the foot notes that each syndicated post names its original as the canonical address. It is built from Switch and Guides. For a blog that republishes elsewhere and wants search engines and readers to find the original. The outlets are invented.

FAQ

What does the Switch do?

It turns the posts that ran only here into quiet lines and updates the count, which is a polite live line. The rows stay where they are (a quiet row's content is unseen and out of the tab order, and one muted line says why), so turning the filter on or off never moves the page.

What is the canonical note for?

When a post first ran on another site, the copy on yours should name that page as its canonical address (<link rel="canonical">), so search engines credit the original and do not treat yours as a duplicate. The note says so for readers; add the tag to each post's page.

Are the outlets real?

No. Meadowvane Journal, Tarnmere Review and Brackenholt Weekly are invented, and a monogram is only their initials set in type, never a logo. Edit POSTS: an outlet name or null for a post that ran here only, the first date, the reading time and the title.

How does it fit on a phone?

Each row keeps its monogram at the start with the title and the origin line beside it, and the links wrap onto their own line under them.

Does it work right to left?

Yes. The rows mirror, the external-link arrow flips, and dates, counts and reading times are isolated with bdi.

  • Pro

    A guest post on an outdoors blog: a header with the one Pitch a guest post button, an article under a Guest post badge, and an About the author frame with a bio and three icon links that carry tooltips.

  • Pro

    A link roll in three ruled columns, Books, Tools and Papers: a monogram tile, an external link, the source domain in mono, one line on why, and a Copy button for the link.

  • Pro

    Featured Post Blog

    Featured story

    One lead post as a split, its copy beside a drawn greyscale cover behind a divider, with three more posts as cells on shared hairlines under it.

  • Pro

    Pinned Posts Blog

    Reading tools

    Three pin slots in a tinted band above a list of posts: a pin toggle on each row fills the first empty slot, an empty slot reads Pin a post, and the band counts pinned posts.

  • Pro

    Twenty posts as dense one-line rows like a printed contents page: date, title, a dotted leader and the reading time, eight shown and twelve behind a Show more button.

  • Pro

    Quote Card Share Blog

    Reader feedback

    A quote-card builder: pick one of three sentences from an issue and a drawn typographic card shows it, with Copy quote and Copy link buttons that really copy and a Send by email link.