shadcn.io is not affiliated with official shadcn/ui
No Comments Empty State Block for Solid
A document reviewer's comments sheet shown open in place at the end of a drawn page: a sticky margin note drawing, a field with a 0 / 500 counter and a Comment button that stacks comments with a Delete button on each.
Installation
Overview
Show the empty comments of a document as the sheet they live in, with this no comments empty state for Solid with Ark UI. The host is Penciledge, a document reviewer: its header holds the real Comments button, a speech bubble with the count, and under it a stage draws the draft, a page with a title, paragraphs and a picture block, and at its end edge a dashed margin note. Drawn open in place at the stage's end edge, full height, is the Sheet: a drawing of a sticky note pinned to the edge of a page, "No comments yet", a Textarea with a 0 / 500 counter and the Shine Button, the only colored control, Comment. Posting stacks the comment as a Message row with your initials, the date and a Delete button, the empty message gives way to it inside the same scrolling body, and the margin note on the page turns solid. Pressing Comments opens the real sheet with the same content. The frame is ruled by Guides, and everything moves with CSS only. For the comment panel of a document, a design file, a pull request or a task.
FAQ
What stays in the page, and how do I make it real?
The comments stay in the page's state: each row says whose it is and when, a reload empties them, Start over empties them without one, and nothing is sent or saved. To wire it for real, send the text to your API where the code says so, add the comment from the response, and delete it on your server when Delete is pressed.
What is the in-place sheet, and what is the real Sheet?
Shown open in place for the preview, so the block shows its content without a click: on load the sheet is drawn as a plain non-modal panel at the end edge of the stage. Pressing the Comments button opens the real Sheet, with its focus trap, Escape to close it and focus back on the button, and the in-place copy stays closed until a reload. In your app keep only the Sheet and its trigger.
What does Comment do, and what are the limits?
A comment can be up to 500 characters and the counter reads 0 / 500; within 20 characters of the limit the line under the field says how many are to go. An empty comment is refused with "Write a comment first" and focus goes back to the field. The demo keeps four comments; at four the field says so and Delete or Start over makes room.
What happens when I delete a comment?
It goes at once and a polite status says so. Focus moves to the Delete button of the first comment that remains, or to the field when none is left, and the empty message comes back when the last one is gone. The margin note on the page goes back to dashed.
Which side does the sheet open on, and how does it look on a phone?
The sheet opens at the end of the layout: on the right in a left-to-right page and on the left in a right-to-left one, read when you press the button. On a phone the in-place sheet docks to the foot of the stage as a bottom sheet so the Comment button stays on the first screen, and the real sheet keeps the catalog's own phone layout.
Is it usable with a keyboard and a screen reader?
The Comments button is named with its count, such as Comments, 2. In the sheet Tab reaches the field, Comment, and each comment's Delete, whose name carries the start of that comment. The field's counter is hidden from assistive technology and the text under it says what is allowed. A polite status line says when a comment is added or deleted, and the drawings are hidden from assistive technology.