Empty Comments State
Empty discussion panel with a zero comment header, a watcher avatar row, and an inline composer with a mention hint and visibility note.
Empty discussion panel with a zero comment header, a watcher avatar row, and an inline composer with a mention hint and visibility note.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Empty Comments State is the panel a document shows before its discussion has started. The header names Discussion with a 0 comments badge, and the body centers a MessageSquare icon, the heading No comments yet, and a line saying feedback on the Q3 launch plan starts here. An avatar row names the three watchers, Maya, Noah, and Sofia, who get notified when you post. A real composer sits below with an Add a comment label, a Textarea, a mention hint, a visibility note, and a Post comment button, so the first comment starts inline rather than in a modal.
The watchers are a small array, so the avatar row and its sentence have one place to change. Keeping a working composer in the empty state is the point: the explanation promises that threads, reactions, and edit history switch on once the first comment is posted, and the mention hint tells people how to pull a teammate in from the very first line.
Reach for this block on any document, task, or record whose discussion is empty, wired to the zero-count branch of your comments fetch so the watcher list and workspace name are real. Point the Post comment button at your create handler and keep the mention hint honest about how notifications fire.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the document discussion before its first comment. Other empty comment states:
Tip: keep a working composer in the empty state so the first comment is one click away, never behind a modal.