shadcn.io is not affiliated with official shadcn/ui
RSS Feed Changelog Block for Ark UI
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 Ark 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.