Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Compliance Updates Changelog Block for React

Regulation changes as rows rail to rail: the law as a title, what changed, its effective date and stage, and a readiness bar that opens a list of its tasks.

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 regulatory-change tracker for React with Base UI, written for Mandate, a fictional product. A start-aligned header sits over four rows on the page's lines. Each row names a law as its heading (the EU Data Act, the Cyber Resilience Act and the European Accessibility Act, in text only, with no seal or badge), says in a sentence what changed, shows the day it takes effect with an icon and a word (Upcoming or In effect), and a readiness line: a bar and 4 of 5 tasks. That line is a Collapsible trigger that opens the row's tasks, each marked Done or To do. It's built from Collapsible, Progress and Guides. The effective dates are the laws' own; the one-line summaries are short and not legal advice, and the tasks and progress are example data.

FAQ

How do I add a regulation?

Add an entry to REGULATIONS: a name, a one-sentence change, the fixed effective ISO date, a stage and its tasks (each a text and a done flag). The readiness text and the bar are computed from the tasks.

Is this legal advice or a compliance claim?

No. The block names laws as text and says in a quiet line that summaries are examples, not legal advice. It has no seals, logos or certification wording. Check each date and summary against the official text before you publish your own.

How do the rows open?

The readiness line is a button with an expanded state. Any number of rows can be open, the Data Act row starts open, and a closed row's tasks are inert so Tab skips them.

Does closed content stay in the page?

Here a closed row's tasks stay in the page, inert and hidden.

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

Below lg the date, the stage and the readiness line stack under the change. In a right-to-left layout the rows mirror; dates and counts keep their reading order.

  • Pro

    Deprecation Notices Changelog

    APIs and integrations

    Four deprecation notices, each a window bar from the day it was announced to the day it sunsets, filled to an as-of day with a tick, with the days counted and the replacement named.

  • Pro

    Release Band SLA Compliance

    Incidents and uptime

    A band of three release cells for a managed-service reporting product: uptime, p95 response and first reply with the target beside the actual, a check or a ring for each, and a breach count in each foot.

  • 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

    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

    Enterprise Updates Changelog

    Spotlights and media

    Six enterprise capabilities as a three-by-two grid of cells with overshoot, each with an icon plate, a lock badge and the release it shipped in, and a closing band with a Talk to sales Shine Button.

  • Pro

    Feature Sunset Changelog

    Roadmap and customers

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

All 200 changelog blocks