Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Notification blocks

Pro

File Comments Notification Block for Svelte

Review comments grouped by file, each quoting the line it is about, with a Resolve toggle that moves a comment into a collapsed resolved group and back.

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

Show what reviewers said on your files, file by file, with this comment notification for Svelte with Ark UI. A compact header sits over one hairline frame with a plus mark on each corner. The first band counts the open comments ("3 of 4 open") and holds the one polite line that says what just moved. Under it each file has a tinted band with its name in mono and "2 open", then its comments: the commenter's initials, who and when, the line it is about in a quoted rail with its line number, and what they said. The Resolve Toggle at the end of each comment moves it into a collapsed "N resolved" Collapsible at the foot, where the same toggle, now pressed, reopens it. Every file keeps the height it has with all its comments open, so resolving one never moves the bands below it. It's built from Toggle, Collapsible, Avatar and Guides, with a CSS entrance only. For a document or code review tool, a design handoff or an editorial workflow.

FAQ

How do I fill it with my own files and comments?

Edit DOCS and REMARKS at the top of the file. A document has an id and a path; a comment has the document id it belongs to, who wrote it (by), an ISO at time, the line number, the quote (the text of that line) and its text. Every count, the "N open" on a file, the resolved total and the sentences come from those lists and from one list of resolved ids, so nothing is typed twice. Times are worked out from one AS_OF constant, never from the clock.

What happens when I press Resolve, and what stays local?

The comment's id joins a list of resolved ids kept in the page, the comment leaves its file's list and appears in the resolved group, and a line says "Resolved Dagny's comment on docs/pricing.md. 3 of 4 open." Pressing it again in the resolved group removes the id and the comment returns to its file. Nothing is saved or sent. To make it real, call your API in the flip handler, update the list from the response and say a failure in the same line.

Why is there blank space under a file after I resolve a comment?

On purpose. Each file's list sits in one grid cell with an unseen copy of all of its comments, so the band keeps the height it had with everything open and nothing below it shifts when you resolve. The empty room is the cost of that. If you would rather the file collapse, remove the unseen list and its cell.

Is it accessible by keyboard and for a screen reader?

Every Resolve toggle is a real button named for its comment ("Resolve the comment by Dagny Osei on docs/pricing.md, line 14") and exposes whether it is pressed. After you resolve one, focus moves to the next open comment's toggle, or to the "N resolved" button when none remain; after you reopen one, focus follows it back to the file. The polite status line announces each change, and the only state a comment has is open or resolved.

How does it look on a phone?

The bands stack as they are. In each comment the Resolve toggle moves from the end of the row to under the words, and the quoted line wraps inside its rail. The resolved group's rows fold to two lines and keep their toggle at the end.

How are the quoted lines drawn?

As a native blockquote with a start-edge rail, the line number and the line in a mono font whose direction is fixed, so code reads the same in a page that is mirrored. They are plain text from the typed data, never HTML.

All 100 notification blocks