shadcn.io is not affiliated with official shadcn/ui
Feature Adoption Curves Changelog Block for React
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.
Installation
Overview
An adoption chart for React with Base 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.
Related
- Pro
A/B Test Results Changelog
Metrics and chartsA framed table of five A/B tests with the lift drawn as a bar from a zero line, a whisker for the interval, the lift in words and the decision as an icon and a word.
- Pro
Experiment Results Accordion Changelog
Metrics and chartsAn accordion of four hypotheses with the verdict as an icon and a word, and in each panel an arms table and a significance meter with a tick at 95 percent.
- Pro
Beta Features Changelog
Roadmap and customersFour early-access programmes for a notes app on shared hairlines, each with a stage tag, the release it first shipped in and a real switch to join, under a header that counts how many betas you are in.
- Pro
SDK Versions Changelog
APIs and integrationsClient libraries in one tabbed window: a tab per language with its latest version, then that version large, its day, a support state as a shape and a word, the install command in a code region with a Copy button, and a table of the last three versions.
- Pro
Feature Sunset Changelog
Roadmap and customersFour retiring features as ruled Collapsible rows with a four-square phase meter; each opens to its four phases, who is affected and its replacement, and a toggle group filters by area.
- Pro
API Usage Metrics Changelog
APIs and integrationsSix weeks of requests as stacked columns by API version, the legend and title reading the latest week's shares from the data, a Requests or Share toggle, and a three-cell band of requests, error rate and p95 latency with their changes.