Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Feed Chooser RSS Blog Block for React

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

Overview

An RSS feed block for React with Base 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.

  • Pro

    An end-of-post newsletter sign-up: an email field with the Subscribe button inside it, a message slot that never moves, and a confirmation that replaces the form in the same space.

  • Pro

    Topic Switch Subscribe Blog

    Subscribe and alerts

    Topic subscriptions as six Switch rows with a line and posts per month each, a live summary that counts the topics and posts, and a Save preferences button with an honest confirmation.

  • Pro

    Season Tabs Podcast Blog

    Audio, video, photos

    A podcast index in season tabs: each episode row has its number, title, guest, date, a bar whose length is the episode's minutes against an hour, and a Listen link.

  • Pro

    One list of eight pieces with a format filter that has counts (All, Read, Watch, Listen, Look) and a small drawn tile for each format: text lines, a player frame, a waveform, a bar chart.

  • 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.

  • Pro

    Blog Footer

    Content and updates

    A blog footer for a data-engineering blog: topic pills with post counts, the two latest posts and an RSS link on one side, two link groups on the other.