Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Comments blocks

Pro

Version Comparison Comments Block for React

Eight review comments on a three-version spec, with From and To selects that label each comment Carried, Resolved, New in To or Orphaned, a count line, and a Show text button that opens the sentence it was pinned to.

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

Keep review comments honest when a document changes, with this version comparison for React with Base UI. A compact header names the spec and the product. Two Native Select cells, From and To, pick two versions of a webhook delivery spec (they can never be the same: choosing one that clashes moves the other). Every one of eight comments is pinned to the version it was written on, and the list gives each a word and a glyph for what became of it between the two: Carried (its anchor text is still there), Resolved, New in To, or Orphaned (its anchor text was removed). A comment written after To reads "Not written yet". A line counts them ("Carried 3, resolved 1, new 3, orphaned 1"), and a Show text Collapsible under each comment opens the sentence it was pinned to. It is built from Native Select, Collapsible, Guides and lucide glyphs, with a CSS entrance only. For documentation and spec reviews that run over several drafts.

FAQ

How do I use my own versions and comments?

Edit VERSIONS and LINES. A comment line has the author, the version it was written on, the version in which its anchor text was removed (or 0), the version in which it was resolved (or 0), the anchor text and the comment. The fate of each comment between two versions is worked out by fateOf from those numbers, so a longer spec only needs more lines and more versions in the selects.

What do the four words mean?

Carried: written on or before From, and its anchor text is still in To. Resolved: it has been resolved by To. New in To: written after From and up to To. Orphaned: its anchor text was removed by To, so the comment points at nothing. Resolved wins over the others. In a real app, orphaned comments are the ones to move or close by hand.

What stays local, and how do I make it real?

Everything; the versions and comments are typed and the selects only change what the page shows. In a real app, store each comment with the version id and a quote of its anchor text, re-find the quote in the other version (with a fuzzy match) and mark the comment orphaned when it is not there.

Is it accessible?

Both selects are native and labelled. The fate is written as a word in every row, with a glyph that is hidden from screen readers, and a polite line speaks the new counts when you change a version. Show text is a disclosure button with an expanded state, and the text stays out of the tab order while closed.

What happens if I pick the same version twice?

You cannot: From offers the first two versions and To the last two, and picking a From that is not before To moves To one version later (and the other way round). So a comparison always goes forward in time.

How does it look on a phone?

The From and To cells stack with From first, the count line wraps, and each comment keeps its glyph beside the text.

All 100 comments blocks