Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

UX Research Findings Changelog Block for React

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 Base 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.

  • Pro

    Stakeholder Summary Changelog

    Roadmap and customers

    A split with three business figures that recompute for a chosen team, and three releases in plain language with the teams they affect as chips.

  • Pro

    Customer Request Changelog

    Roadmap and customers

    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.

  • Pro

    Feedback Votes Changelog

    Votes and sharing

    Four release notes you can vote on: Yes and No toggles that move a count by one and back, a share bar, and a No that opens a reason field with an honest local Send.

  • Pro

    Experiment Results Accordion Changelog

    Metrics and charts

    An 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

    Customer Impact Changelog

    Roadmap and customers

    Three customer-facing issues as tabs; each panel shows the issue's reach on four plan tiers as text and a bar, how it ended, and a total counted from the data.

  • Pro

    Beta Features Changelog

    Roadmap and customers

    Four 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.

All 200 changelog blocks