Changelog Page
A changelog with working tag filters and releases that expand in place.
DOM + CSS0 deps1 file · 5 KB TSX
Props
// Full, shippable page — real size at normal type scale. The registry
// preview above is a scaled-down miniature of this same composition, not
// a different component.
"use client";
import { useState } from "react";
const ENTRIES = [
{
version: "2.4.0",
date: "Aug 28, 2026",
tag: "New",
items: ["Realtime collaboration on documents", "Dark mode across every surface"],
},
{
version: "2.3.1",
date: "Aug 14, 2026",
tag: "Fix",
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this page template
A changelog is read almost exclusively top-down by returning users checking 'what changed since I last looked,' so the entries are ordered newest-first with no exception — a chronological changelog is the single most common mistake in this page type and quietly kills the thing it exists for. The vertical line-and-dot timeline is doing real communication work, not just decoration: it signals 'this is a continuous stream, scroll for more' in a way a stack of plain cards doesn't. The non-obvious detail is the TAG_STYLE lookup object driving each tag pill's color — New, Fix, and Improved each get a distinct tint from one data-driven map, so a team adding a fourth tag type edits one object instead of hunting through conditional class strings. Caveat: this template has no pagination or 'load more' — past a few dozen entries a real changelog needs either infinite scroll or a per-month archive view, which this composition intentionally leaves out.
