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.
Installation
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.
Related
- Pro
Inline Subscribe Newsletter Blog
Subscribe and alertsAn 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 alertsTopic 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, photosA 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
Format Filter Multi-Format Blog
Audio, video, photosOne 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 feedbackA 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 updatesA 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.