Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Accessibility Score Changelog Block for React

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.

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 scorecard for React with Base UI, written for Auditlight, a fictional audit tool. A divider splits the block with the figure on the start side: the chosen release's score, large, in a Circular Progress ring with its change since the release before it. At the end sit the header and Tabs for four releases (v4.2 to v3.9) over a table of that audit's items: the WCAG 2.2 criterion in mono, the issue, a severity word and a status word, Fixed or Open. The score is not typed in. It is 100 minus 10 for each open critical item, 6 for serious, 3 for moderate and 1 for minor, worked out from the table, and the change is the difference from the release below. It's built from Circular Progress, Tabs, Guides and a native table. The audits are example data.

FAQ

How is the score worked out?

scoreOf starts at 100 and subtracts each open item's cost: critical 10, serious 6, moderate 3, minor 1. Fixed items cost nothing. The change shown is the score minus the score of the release below, and the oldest release says it is the first audit in the log. Edit RELEASES and the figure, the text and the sentence all follow.

What happens when I pick a release?

The ring, the score, the change and the table swap together, and a polite line says the new score. Every table is also present unseen in the same cell, so the frame's height never changes. Arrow keys move between the tabs.

Is this a conformance score?

No. It is a simple count of open items by severity for an example product, not a measure defined by WCAG, and the block claims no conformance level.

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

The score comes first on a phone, then the header and the tabs; the criterion moves under each issue. In a right-to-left layout the split mirrors; scores, versions and criteria keep their reading order.

What moves?

The header, figure and table fade up once on load, and the ring sweeps to a new score with the catalog's own transition. Reduced motion turns the entrance off.

  • Pro

    Accessibility Log Changelog

    Security and audits

    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.

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

  • 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

    SDK Versions Changelog

    APIs and integrations

    Client 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

    Release Blockers Changelog

    Deploys and rollouts

    A verdict header counted from the data with a cleared bar, a toggle group (Open, Cleared, All) and an inset framed table of blockers with owners, states as shapes and words, and the day each was opened.

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

All 200 changelog blocks