Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Customer Request Changelog Block for Svelte

A "you asked, we shipped" band of four requests, each with an avatar stack, a count of customers and a span bar on one shared axis from the first ask to the release that shipped it.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A customer-request changelog for Svelte with Ark UI, written for Wishlane, a fictional customer-feedback tool. A header counts the customers behind the four requests and the average wait, over a band of rows rail to rail, newest first. Each row names the request, shows an overlapping stack of the first customers who asked with a count of the rest ("214 customers asked"), and draws a span bar on one axis shared by every row, from January to October with a hairline for each month: a hollow dot where the first request came in, a solid dot where it shipped. Under the bar a sentence says "Shipped in v4.1.0, 23 days after the first request" with both days as dates. The days, the bar's position and length and the header's average are all computed from the typed dates. It's built from Guides, Avatar and CSS transitions for the entrance, and your theme's tokens for every colour. For feedback tools and product teams that want to show what customers asked for and how long it took. The requests, counts and people are example data.

FAQ

How do I change the requests and the dates?

Edit REQUESTS at the top of the file. A request has a title, a summary, a version, the firstAsked and shipped days as ISO dates, how many customers asked and the askers shown in the stack. The days it took, the bar and the header's total and average are computed from those, so nothing is typed twice. Change AXIS_START and AXIS_END to move the shared axis.

Why do all the bars share one axis?

So the rows can be compared: a short bar is a quick answer and a long one a long wait, wherever it sits in the year. On lg the months are labelled above the rows; on a phone the bar keeps its month ticks and the sentence under it carries the days.

What does a screen reader get?

The title, the summary, the count ("214 customers asked"), the sentence about the days and both dates as time elements. The avatars and the bar are decoration and are hidden, because the text says the same.

How does it fit a phone and a right-to-left layout?

On a phone the avatars grow to 40 px, the count sits under them and the bar goes under the request. In a right-to-left layout the rows mirror, while each bar keeps its left-to-right time axis and each count or sentence stays in one piece.

What moves, and what happens with reduced motion?

The header and the band fade up once on load. Nothing else moves, and with reduced motion the entrance is off.

All 200 changelog blocks