shadcn.io is not affiliated with official shadcn/ui
Inline Comments Block for Vue
A launch brief in a framed window with three highlighted phrases that light their margin cards, a Resolve button, a Show resolved switch and a way to comment on text you select.
Installation
Overview
Comment on the exact words, with this document comments window for Vue with Ark UI. There is no header above the window: its top bar holds the title, a Show resolved Switch and the one Shine Button, Add comment. The body is a document and a margin side by side. The document is an article with three highlighted phrases (a heavy underline and a soft tint); pressing one lights its margin card and moves focus to it. Each card has the author, the age, the quoted words, the comment and a Resolve Button, which sends it to a collapsed Resolved group that the switch opens with a Collapsible. A strip above the text reads what you select with the Selection API and offers Comment on that quote; Add comment opens the same composer card with a paragraph chosen in a Native Select, which is the keyboard route. Margin cards stack in order, so nothing overlaps; below the medium breakpoint the margin sits under the document with Jump to text buttons. It is built from Switch, Shine Button, Button, Collapsible, Textarea, Field, Native Select, Avatar and Guides, with a CSS entrance only. For document editors, specs, contracts and any place where feedback belongs to a sentence.
FAQ
How do I use my own document and comments?
Edit PARAS (an id, a one-word label and the text of each paragraph), PEOPLE and START. A comment has an id, the paragraph it is on (para), the phrase it is about (the exact words, or empty for the whole paragraph), its author, an ISO at and its body. The highlights are found by searching the paragraph for the phrase, so a phrase that is not in the text simply has no highlight. ME is the person using the page.
How does commenting on selected text work?
When you release the pointer or a key inside the document, the block reads window.getSelection(). If the selection is at least three characters and starts in a paragraph, the strip above the text shows it as a quote and its Comment button becomes available; pressing it opens the composer in the margin with that quote and paragraph. Selecting with the keyboard needs caret browsing in most browsers, so the full keyboard route is Add comment: pick a paragraph in the select, write, post. The new comment gets a highlight when its quote is in the paragraph.
What does Resolve do?
It moves the card to the Resolved group, removes the highlight from the document unless Show resolved is on (then it stays as a dotted underline) and says so in the status line at the foot of the window. Resolved cards stay in the group with their text; there is no delete here, so nothing is lost. The Show resolved switch and the group's button open and close the same group.
What stays local?
Comments, resolves and the switch. Posting adds a card to the page and says "Posted in this demo. Nothing sent." To make it real, store the paragraph, the quoted words and the character offsets with each comment on the server, so a comment follows its words when the document is edited, and decide what happens to a comment whose words were deleted.
Is it accessible?
The window has a title and a status line, the document and the margin are labelled regions you can reach with Tab, and each highlight is a real button whose name says it shows a comment on those words. Pressing it moves focus to the card, which is a list item you can read normally. Resolve names its author. The composer has a label, a paragraph select, a problem line that is always in place and Cancel. State is always written ("Resolved"), never only a style.
How does it look on a phone?
The window keeps its height and scrolls as one column: the selection strip sticks to the top, the document follows and the comments sit under it, each with a Jump to text button that scrolls back to its highlight. The top bar keeps the title, the switch and Add comment; the switch's words are left out and remain its name.