shadcn.io is not affiliated with official shadcn/ui
Disclosed Sponsored Posts Blog Block for Radix UI
Four sponsored posts, each labelled Sponsored with the sponsor's typographic monogram, a Why am I seeing this popover on editorial independence, and a closing band that sets sponsored apart from editorial with a strip of twelve issues.
Installation
Overview
A sponsored-posts section for React with Radix UI, written for Gitmoor Weekly, a developer newsletter. A start-aligned header carries a "Why am I seeing this?" outline button that opens a popover on editorial independence. Four rows follow, newest first: a typographic monogram for the sponsor (two letters in display type with one rule placed differently for each), a "Sponsored" badge and the sponsor's name, the title as the row's one link, a one-line dek, the issue's date and the reading time. A closing band sets sponsored apart from editorial in two columns and draws the last twelve issues as ticks, hollow for an issue that carried a sponsored post. The counts and the share are worked out from the typed issues. The sponsors are invented. It's built from Guides, Badge, Button and Popover. For newsletters, magazines and blogs that run sponsored content and say so.
FAQ
How do I use my own sponsors and issues?
Edit ISSUES at the top of the file: each issue has a fixed sent date, the number of editorial posts and a sponsored post (or null) with its sponsor, two-letter monogram, mark (where the rule sits), title, dek and minutes. The rows are the issues that have a sponsored post, newest first; the counts, the percentage and the tick strip are calculated from the list.
What does the popover say, and can I use it without a mouse?
It explains how sponsorship works (one labelled post in one issue, no drafts shared, no reviews for sale), how many of the last twelve issues carried one, and links to a sponsorship policy. It opens from a real button, closes with Escape and returns focus to the button.
How is the sponsored label kept honest?
Every row carries the visible word "Sponsored" in a badge next to the sponsor's name, not only a colour or an icon, and the closing band repeats the rule in plain words. The monograms are drawings, hidden from assistive technology, and the sponsor's name is text.