A Changelog Feed Built as a Block
An updates page tells users what changed in your product and when. This block renders that story as a vertical feed of dated entries, each one a Shadcn UI card with a colored icon tile, a type badge, a formatted date, a short description, and an optional external link button for jumping to a live preview.
Two details make the page feel finished rather than generated. A last-update badge in the header is computed from the newest entry's date, so it never goes stale, and a muted call-to-action panel at the bottom invites users to suggest features, turning a passive changelog into a feedback channel.
Who Needs an Updates Page
SaaS products use updates pages to prove momentum to trialing customers, mobile teams mirror their release notes on the web, agencies publish delivery logs for clients, and open source maintainers surface milestones without forcing users to read commit history.
The block pairs naturally with a public roadmap: the roadmap says what is coming, the updates feed says what shipped. If you prefer version-numbered release notes over a feature feed, the changelog pages category covers that adjacent pattern.
How the Feed Is Put Together
The page is a React component driven by a typed array of update objects, each carrying a date, a type such as Feature or Major, a title, a description, a lucide icon, an accent color, and an optional URL. Rendering the feed is a single map over that array, which is exactly what makes the block easy to hook up to real data later.
Each entry uses the Card family, with CardHeader holding the icon tile and title, CardAction rendering the external link button only when a URL exists, and CardContent carrying the description. Dates are formatted with the browser's built-in toLocaleDateString, so there is no date library to install, and the whole feed sits in a centered max-width Tailwind container for comfortable reading.
Adjusting Look and Feel
Type badges map to soft color classes and icon tiles to saturated Tailwind accents like teal, green, and orange, while structural colors come from Shadcn UI tokens: text-muted-foreground for secondary text and bg-muted for the suggestion panel. Those tokens resolve to CSS variables in globals.css, so a palette change there restyles the page in both light and dark mode.
To add your own entry types, extend the badge color mapping with one case and start using the new type string in your data. The icon tiles accept any lucide icon, which keeps the feed visually varied without custom illustration work.
Components, Ports, and Setup
The block is built from the Card component family, Badge for types and the last-update stamp, and Button for the link and contact actions. It ships in React, Vuejs, and Svelte versions, with the Vuejs and Svelte editions building on the shadcn-vue and shadcn-svelte ports.
Integration starts with the shadcn CLI command at the top of the example page, offered for npm, pnpm, yarn, and bun, or with a copy from the code tab. As a pro block, both unlock with the All Access plan on the pricing page. To go live, replace the static updates array with entries from your CMS, a markdown folder, or a database table, keeping the same object shape.