Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Feature Adoption Curves Changelog Block for Svelte

A reverse split with adoption curves aligned by weeks since ship, four features as buttons with their 28-day adoption and 7-day retention, the chosen curve bold.

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

An adoption chart for Svelte with Ark UI, written for Curvewell, a fictional product-analytics tool. A reverse split behind a divider that runs from the spine's top rule: at the end a header that names, from the data, the feature that reached the most users in its first four weeks, and under it the four features as buttons, each with its 28-day adoption and its 7-day retention. At the start one chart of adoption curves aligned by weeks since each feature shipped, so a feature from March and one from September start on the same line. The chosen feature is drawn bold with its end value labelled; the others stay as thin faint lines. Choosing another only redraws the lines. The chart is a hand-built SVG with the same numbers in a table for screen readers. It's built from Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For product analytics pages and launch reviews. The curves are example data.

FAQ

How do I change the features and their curves?

Edit FEATURES at the top of the file. Each has a name, a ceiling (where adoption levels off, in percent of active users), a pace in weeks and a 7-day retention. adoptionAt draws the curve from the ceiling and the pace, and the 28-day figure is read from it. To use real numbers, replace it with your weekly series.

How do the buttons work?

Each feature is a real button in an ordered list, with aria-pressed for the chosen one. Choosing a feature bolds its curve, moves the end label and updates a polite line for screen readers. Nothing else on the page changes.

Is the chart accessible?

The drawing is hidden from assistive technology and the same numbers sit beside it in a table, every second week for every feature, with a caption. The weights tell the chosen line from the others, so nothing depends on colour.

Why align by weeks since ship?

A calendar axis would put a feature from March far ahead of one from September. Aligning every curve to its own ship day compares how fast they caught on, which is the question a launch review asks.

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

Below lg the list comes first and the chart under it, and the chart narrows to the screen. In a right-to-left layout the chart stays left to right, because time runs one way, while the list and its text mirror.

What moves, and what happens with reduced motion?

The header and the chart fade up once on load, with CSS transitions, and the buttons ease their background. With reduced motion those are off.

All 200 changelog blocks