shadcn.io is not affiliated with official shadcn/ui
No Comments Empty State Block for React
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 React with Base 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.
Related
- Pro
No Mentions Empty State
Inbox and chatA work chat's mentions popover shown open in place: a drawn list with a dashed row, a Try it field where typing @ opens five teammates, and a Post button that adds a row naming who was tagged.
- Pro
No Threads Empty State
Inbox and chatA discussion board's first thread: three starter cards with drawn thread sketches, a title and details, one Start thread button and a list of the threads you start.
- Pro
No Reactions Empty State
Social and feedbackA creator feed's post with no reactions: a drawn post with a dashed pill, a bar of six pressed toggles with names in tooltips, and a Copy link to share button that really writes the link to the clipboard.
- Pro
No Feedback Empty State
Social and feedbackA feedback widget's popover shown open in place on a drawn settings page: five drawn faces from flat to curved as radio buttons, bars that are all zero, a follow-up field and a Send feedback button that grows one bar.
- Pro
Invitation Status Sheet Success
People and approvalsA crew page with the sheet that says where each of twelve invitations stands, shown open: filter chips with counts, a status word and time per person, a Resend button on every row and a Resend all pending.
- Pro
No Activity Log Empty State
Activity and updatesA personal activity feed with nothing recorded yet: four tick cards for the kinds of event beside a vertical timeline of dashed nodes that turn solid and write a first-person sample line as each kind is ticked.