Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Accessibility Log Changelog Block for React

An accordion of the accessibility fixes in a release by WCAG conformance level, each with a count and share, and each fix with its criterion, what changed for whom, and the components it touched.

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 accessibility log for React with Base UI, written for Reachwell, a fictional accessibility-testing tool. A start-aligned header counts the 12 fixes in release 4.6 from the data, and an Accordion runs rail to rail under it with a row for each WCAG 2.2 conformance level: A, AA and AAA. A row's trigger shows the level, what it means, how many fixes it holds and its share of all of them as a number and a small bar. Opened, each fix is a line: the success criterion in mono (1.4.3), its name, what changed and for whom, and the components it touched as outline chips. It's built from Accordion, Badge and Guides. The standard is named in text only; the fixes are example data.

FAQ

How do I add a fix?

Add it to a level's fixes in LEVELS: a criterion number, a name, a sentence on what changed and for whom, and the components. The header's total, each row's count and its share come from the data, and shares use whole numbers that add to 100.

How do the rows open?

One level is open at a time and level A is open on load. Each trigger sits inside its own level-three heading.

Arrow keys and closed content, per target

Tab moves between the triggers; arrow keys do not.A closed level's fixes stay in the page, hidden.

Does it claim conformance?

No. It lists fixes against named success criteria, as text, and never claims a product conforms to a level or shows a badge for it.

What changes on a phone and in a right-to-left layout?

The count and the share bar wrap under the level, and each fix's chips wrap under its text. In a right-to-left layout the rows mirror; criterion numbers, counts and percentages keep their reading order.

  • Pro

    Accessibility Score Changelog

    Security and audits

    An accessibility scorecard split by a divider: a ring with the chosen release's score and its change since the release before, and Tabs for four releases over a table of audit items.

  • Pro

    Accordion Changelog

    Lists and timelines

    A release list for release-notes software: five releases as accordion rows, each with its version, date, one-line summary and change count, the newest open on a list of typed changes, and a foot band that links to every release.

  • Pro

    Impact Badges Changelog

    Lists and timelines

    Seven fixes with an impact meter of one to four rising bars and a word, a band that counts each level, and a Sort by Select that reorders the rows by impact or by date.

  • Pro

    Package Changelog

    Packages and versions

    One package's changelog behind a version select: its semver bump, release day, weekly downloads that count on to each version's figure, a Migration guide link, the install command with a Copy button and the changes in an accordion of groups.

  • Pro

    Checklist Style Changelog

    Votes and sharing

    A "tried it" checklist of the six latest things a task board shipped: a real checkbox per feature with its version and day, a count in the header and a meter that fills as you tick.

  • Pro

    Compliance Audit Changelog

    Security and audits

    A control audit split by a divider: a ring of how many controls pass, a Passing, Failing and Pending list, and Tabs for three control families over a table of the most recently checked controls.

All 200 changelog blocks