shadcn.io is not affiliated with official shadcn/ui
Policy Update Diff Success Block for React Aria
A confirmation panel for a new policy version: three clauses as before and after with removed words struck through and added words underlined, who has read it by department, a reminder for those who haven't and a real PDF download.
Installation
Overview
Show what a new version changed, and who has seen it, with this confirmation panel for React with React Aria. It's the panel Charterwick, a policy-management app, shows when a policy has a new version: a header with one action, the Shine Button that downloads it as a PDF, over one framed card ruled by Guides. At the start of the card are the clauses that changed, each as two lines: the old wording with what was removed struck through and marked with a minus and the word "Removed", and the new wording with what was added underlined and marked with a plus and "Added". At the end is who has read it, one row per department with a bar and "19 of 22", and an outline Button that queues a reminder for everyone who hasn't. For policy, compliance and document-control tools, and any change log that has to be read by people.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was published or sent. The wording, the five departments and their counts are typed sample data, and Remind 14 people only changes this page ("Reminder queued for 14 people in this demo. Nothing was sent."). To wire it, build CLAUSES from your two versions (each as pieces of unchanged, removed and added text) and DEPARTMENTS from your acknowledgement records, and send the reminder from remind.
How is the diff drawn, and can it be read without color?
Each clause is a list of typed pieces. The old wording is the unchanged and removed pieces, with the removed ones in a real del element (struck through, in a heavier weight) under a minus and the word "Removed"; the new wording is the unchanged and added pieces, with the added ones in an ins element (underlined) under a plus and "Added". Assistive technology announces the two elements as removed and inserted text, and nothing is conveyed by color. A clause that was dropped shows its words struck through and "Nothing replaces it" in place of the new wording.
Where do the totals come from?
From the departments. The people who have read it and the people who have to are sums of the five rows (39 of 53, shown as a last row named Everyone), the percentage is rounded from them, the number on the reminder button is the people still to read, and the clause counts in the header come from the clauses. Each bar is the share of its own department and is hidden from assistive technology, since "19 of 22" carries the same fact.
Does Download PDF really work?
Yes. The page builds a small one-page PDF in the browser from the same wording the panel shows (each changed clause before and after, and the read count) and saves it through a Download Trigger. It is plain text in one font, named as a sample, and says in its second line that it comes from a demo. In your app, return the real document from your server instead.