shadcn.io is not affiliated with official shadcn/ui
RSS Feed Changelog Block for React
A feed address in a read-only field with a Copy button, a choice of RSS 2.0, Atom or JSON Feed that swaps the address, and the latest four entries as rows.
Installation
Overview
A feed address for React with Base UI, written for Feedloom, a fictional feed host. A start-aligned header carries the title and one sentence. Under it an inset frame with + marks on its corners holds a choice of format (RSS 2.0, Atom or JSON Feed), a line on what the format suits and the feed's address in a read-only field with a Copy button. Choosing another format swaps the address, and the line and the field keep their size. Copy puts the address on the clipboard for real, shows a check, and a polite status says "Feed address copied", or that the clipboard refused it. Under the frame, the latest four entries are rows between the page's rails, each with a linked title, a sentence, its type tags, version and day. The rows end the block. On a phone the address scrolls inside its field and the entries stack. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Toggle Group, Input Group, Copy Button, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For changelogs and release hubs that publish a feed. The addresses and entries are example data.
FAQ
How do I use my own feed addresses?
Edit FORMATS at the top of the file: each format has an id, a label, an address and a short line on what it suits (suits). The addresses here use feedloom.example, a domain that cannot belong to anyone, so replace it. Drop a format by deleting its object; the choice and the field follow.
Does Copy really copy?
Yes: it writes the address to the clipboard, swaps its icon for a check for a moment, and a polite status inside the button says "Feed address copied". If the browser refuses (no permission, or a page not served over HTTPS) the icon turns into a cross and the status says it couldn't copy. Selecting the field also selects the whole address, so it can be copied by hand. The button starts over when you pick another format.
What is the difference between the three formats?
They carry the same entries. RSS 2.0 is the oldest and works in every reader; Atom carries a time zone on every entry; JSON Feed is the easiest to read from a script. The line under the choice says this for the one selected, in a line that keeps its height so nothing moves.
How does it work with a keyboard and a screen reader?
The format choice is a single-choice group that is never empty: Tab enters it and the arrow keys move between the three. The address field is read-only but focusable, named "Feed address", and the button is named "Copy feed address". The entries are articles with a heading each, and the type tags say their word as well as showing an icon.
How do I change the entries?
Edit ENTRIES, newest first: each has a version, an ISO date, its kinds, a title and a summary. Keep to three to five: more belongs behind a link.
How does it fit on a phone and in a right-to-left layout?
Below md each entry stacks its version, day and tags under the text, and a long address scrolls inside its field instead of widening the page, so nothing scrolls sideways at 320 pixels. The address and the versions stay left to right in a right-to-left layout while the rest mirrors.
Related
- Pro
Subscribe Updates Changelog
Votes and sharingA changelog split with an email form at the start (a field that checks itself, an Every release or Weekly digest choice and a Shine Button) and the three latest releases at the end.
- ###Pro
Copy Link Changelog
Votes and sharingThree docs-host releases, each its own cell with an anchor and a Copy link button that puts that release's permalink on the clipboard and says so, with a :target ring on the one the address points at.
- Pro
Newsletter Email Changelog
Spotlights and mediaA centred header over a framed release email: From, To, Date and Subject as a list of facts, one featured release in large type, an Also this week list of three and a View the full changelog button.
- Pro
Release Timeline Changelog
Lists and timelinesA release timeline for an API client: a compact header with a Subscribe link, then the latest four releases on a hairline rail with dots, each with its version, date, type tags, a linked title and its notes, and View all releases at the foot.
- Pro
Minimal Newsletter Footer
Newsletter sign-upA slim newsletter footer for a weekly letter: one centred title and line, a single email field with the Shine Button inside its box, and a legal band, with a real check and a confirmation in place.
- Pro
Condensed Feed Changelog
Lists and timelinesTwelve releases of a news reader as a single-line ledger: the day, a type word, the headline and the version on one row, month rows between, and the older rows opening in place.