shadcn.io is not affiliated with official shadcn/ui
Breaking Changes Changelog Block for Vue
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 Vue with Ark 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.