Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

UX Research Findings Changelog Block for Radix UI

A changelog of research findings in three cells: the insight, the figure counted up beside a share bar, one participant quotation with its speaker, and the release the finding shaped.

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 research changelog for React with Radix UI, written for Fieldstudy, a fictional user research tool. A centred header counts the people behind the findings from the data, then three cells whose frames run a little past their corners, stacked on a phone. Each cell opens with the method as an outline badge (usability test, interviews, survey) and the insight as its title, then the figure: how many of the participants it held for, counted up once beside a thin bar that fills to that share. Under it, one participant's words in a quotation with who said them, and at the foot the release it shaped, with its version, day and what changed. It's built from Guides, Badge and Counting Number, with CSS transitions for the entrance and your theme's tokens for every colour. For research repositories, product blogs and release notes that show why a change was made. The participants are fictional and the figures are example data.

FAQ

How do I change the findings?

Edit FINDINGS at the top of the file. A finding has a title, a method, count out of taken people, what the figure measures, a quote with its speaker, and the release it shaped (a version, an ISO date and a change). The bar's fill and the total in the header are worked out from those numbers.

How is a quotation marked up?

Each quotation is a blockquote inside a figure, and the speaker is a cite in the figure's caption, so the words and their source are linked for screen readers. The participants are labelled by role only; use names only with consent.

Why a bar and not a chart?

Each finding has one number, so a single filled bar says it at a glance, and the count and the total are in the text beside it for everyone. The bar is decoration, hidden from assistive technology, and sits in a left-to-right box so it fills from the same side in a right-to-left layout.

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

Below lg the three cells stack one under another at full width, so nothing scrolls sideways at 320 pixels. In a right-to-left layout the cells mirror, and the counts, versions and dates keep their reading order.

What moves, and what happens with reduced motion?

The header and cells fade up once on load, and each figure counts up once. With reduced motion the entrance is off and the numbers show their final values at once. The block has no state.

All 200 changelog blocks