Value Change
An inline before → after diff of one value — the old value struck through, a muted arrow, the new value — for activity feeds, audit logs and impact reviews.
- Status
- Since
0.25.19- Accessibility pattern
- del/ins semantics, spoken "changed from A to B"
Last updated
Status changed from Draft to Published
Install
Configure registry credentials first using the Quickstart. Before copying this item or any transitive registry dependency, verify the signed manifest and save the exact bytes for Value Change before installation. Retain the digest printed by this command.
pnpm exec vegastack-design verify value-changeInstall with the pinned shadcn CLI. Bare shadcn does not verify VegaStack signature or integrity.
pnpm dlx shadcn@4.21.0 add @vegastack/value-changeRun the exact offline --post-write command printed by the preflight, using its saved item path and independently retained --expected-integrity digest. Use the saved preflight for every transitive registry dependency too; stop on any mismatch before using the components.
Usage
import { ValueChange } from "@/components/ui/value-change";
<ValueChange before="Draft" after="Published" />;
<ValueChange before={null} after="Asha Kumar" />; // added
<ValueChange before="25 Oct" after={null} />; // removedExamples
Changed
Both sides present: the old value in a <del>, struck through in the destructive ink, a
muted arrow, and the new value in an <ins> in the success ink with no underline. It sits
inline in a sentence and inherits the surrounding text size.
Status changed from Draft to Published
Added and removed
Only after is an addition and only before a removal — the absent side and the arrow are
not drawn. null, undefined, booleans and an empty string count as absent; 0 does not.
With neither side it renders nothing.
- Price
- changed from
₹1,200to ₹1,450 - Owner
- added Asha Kumar
- Due date
- removed
25 Oct
Narrow container
The row wraps: a long value breaks onto its own line rather than widening its container.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
after | React.ReactNode | — | The new value, in the success ink. null (or omitted) when the value was removed. |
before | React.ReactNode | — | The old value, struck through in the destructive ink. null (or omitted) when the
value was added rather than changed. |
Data attributes and CSS variables on ValueChange
| Attribute | Values |
|---|---|
data-change | mirrors a prop or state value |
data-slot | "value-change" | "value-change-after" | "value-change-arrow" | "value-change-before" |
Accessibility
- The values are real
<del>and<ins>elements, so the edit survives copy, reader mode and assistive tech that announces insertions and deletions. - The arrow is
aria-hidden; visually hidden connectives make the spoken sentence "changed from Draft to Published", "added Asha Kumar" or "removed 25 Oct". Each value is rendered once. - Colour is never the only cue: the removed value is also struck through, and the sentence says which side is which.
- The component is server-safe — no client boundary.
| Contract | States tested |
|---|---|
| Behaviour | changed, added, removed, empty |
| Accessibility | semantic-html, labeled |
| Visual | changed, added, removed |
Do / Don't
Entry List
A short, compact list of plain entries in a sheet, dialog or popover — a line of text, its muted details and small actions at its end.
File Card
One file as a card row (thumbnail or icon, name, details, actions) that opens the viewer or links to a download or page; UploadCard is its twin for uploads.