shadcn.io is not affiliated with official shadcn/ui
Breaking Changes Changelog Block for React
A framed table of four breaking calls: the old call in a del row, the new in an ins row, who it affects and the day to migrate by, with a codemod command in a terminal strip and a Copy button.
Installation
Overview
A breaking-changes table for React with Base UI, written for Stubwright, a fictional SDK generator. A header names the release and the day it shipped, then a framed table with a caption lists four calls, nearest deadline first: the change by its name, the old call in a del row marked "-", the new call in an ins row marked "+" (mono, with the tint only to help), who it affects and the day to migrate by. A closing band under the table, with a top rule only, holds the codemod command in a terminal strip with a Copy button. The strip is dark by nature, like any terminal, while the rest follows your theme. It's built from Guides and Copy Button, with CSS transitions for the entrance and your theme's tokens for every colour. For SDKs, libraries and APIs that need to say exactly what breaks and by when. The calls and dates are example data.
FAQ
How do I change the calls?
Edit CHANGES at the top of the file. A change has a name, the before and after calls as strings, an affects line and a migrateBy day as an ISO date ("2026-11-30"). Keep them in order of date, nearest first, as the caption says. Dates are spelled out from the ISO day by a small helper, so they read the same on the server and in every browser.
Why a minus and a plus, not red and green?
The old call carries a "-" and the new one a "+", and each has a visually hidden "Before:" or "After:" for screen readers. The tint behind them is only a help, a faint foreground mix, so the table reads the same in a greyscale or high-contrast theme.
Is it a real table?
Yes: a native table with a caption, column headers with scope, and the change's name as the row header. On every base it is a native table, because it needs the caption and the scopes.
Is the terminal strip dark in a light theme?
Yes, on purpose. A terminal is dark by nature, so the strip keeps a dark scope (marked with a comment in the code) and the block around it follows your theme. The command sits in a focusable region so a keyboard can scroll a long one, and the Copy button announces "Copied" politely.
How does it fit on a phone and in a right-to-left layout?
Below md the table keeps one column: each change's old and new call stack under its name, with who it affects and its day as a last line, so nothing scrolls sideways. In a right-to-left layout the table mirrors, while code and the terminal stay left to right.
Related
- Pro
API Deprecation Timeline Changelog
APIs and integrationsA v2 API retired in four phases as read-only Steps in cells that share their hairlines, then a framed table of the five deprecated endpoints with a Copy button on each replacement.
- Pro
Migration Guide Changelog
APIs and integrationsA split: a deadline tag and a running progress count at the start, four migration steps at the end, each with a Done checkbox and a copyable config snippet in a collapsible.
- Pro
Before After Changelog
Spotlights and mediaA compare slider for a design-handoff tool's release: one drawn editor window, its fourteen cramped toolbar icons before and three labelled groups after, under a draggable divider that also answers the arrow keys, with a short table of what changed.
- Pro
Code Diff Changelog
Code and commitsA diffstat header with a drawn five-square glyph and a chip per file, over a framed code window that plays one function's change once and a Copy patch button.
- Pro
Deprecation Notices Changelog
APIs and integrationsFour 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
Semantic Versioning Changelog
Packages and versionsThe anatomy of v3.8.2 split into Major, Minor and Patch with leaders to what each means, a toggle that previews the next version with a rolling number, and the latest release of each kind.