Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Blog blocks

Pro

Feed Chooser RSS Blog Block for Solid

An RSS feed chooser: tabs swap the feed address in a read-only field with a Copy button that really copies it, and a drawn feed-reader window shows the three latest entries of the chosen feed.

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

Overview

An RSS feed block for Solid with Ark UI, written for Feedwell, a newsletter about feed readers. In a split behind a divider, the start holds the header, three tabs (All posts, Essays, Podcast) whose panels each show that feed's address in a read-only field with a Copy button, and a Shine Button link "Subscribe in your reader". The end is a framed feed-reader window drawn as UI that lists the three latest entries of the chosen feed, so choosing a tab swaps both the address and the entries. It is built from Tabs, InputGroup, Copy Button, Shine Button and Guides. For a blog that publishes more than one feed. The feeds and entries are examples, nothing plays and nothing subscribes inside the page.

FAQ

Does Copy really copy?

Yes. It writes the chosen feed's address to the clipboard through the catalog's Copy Button, swaps its icon for a check, and says "Feed address copied" in a polite status inside the button. If the browser refuses (a page not served over HTTPS), it shows a cross and says it could not copy.

What do the tabs change?

Both the field and the window. The tab state is one value: the panel under the tabs shows that feed's address, and the drawn reader shows its sidebar selection and its three entries. Every feed has three entries, so the window never changes height.

Is the reader window a real feed reader?

No. It is artwork: a window frame, a sidebar and rows. The entries are real text with their fixed dates (plain rows, not a list or headings, since the window is a drawing that changes with the tab), and the frame and sidebar are hidden from assistive technology. Edit FEEDS to change the addresses and entries; the caption says they are examples.

What does Subscribe in your reader do?

It is a link. Point href at a feed: address or your feed URL and the visitor's default reader opens. Nothing is subscribed inside the page.

How does it fit on a phone?

The copy comes first, with the tabs, the field and the button, then the window under a hairline with its sidebar hidden so the entries have the full width.

Does it work right to left?

Yes. The split and the window mirror and dates are isolated with bdi. The feed address is code, so it always reads left to right.

All 100 blog blocks