Gallery
See what others have created
ramblinginfestation
@ramblinginfestation
Comment
Design the comment component as a reusable social UI piece, not a full discussion page. Focus on the parts users touch most: writing a comment, reading a posted comment, and replying inline.
Start with a composer that includes an avatar slot, multiline text input, and a clear submit button. Show the empty state, typed state, and disabled state when submission is unavailable. If attachments or emoji are included, keep them secondary and compact so the text field stays the main focus.
Then design the posted comment state: author name, timestamp, comment text, and a small action row for reply, like, and more. Show one nested reply level so the hierarchy is easy to scan. The layout should work in a blog, course, or feed without changing the component’s structure.
Make the component feel calm and readable at small sizes. Text should carry the weight, actions should not crowd the content, and replies should remain visually connected to the parent comment.
What to deliver
- Design a comment composer with avatar, text field, and primary submit action.
- Show the published comment state with author, timestamp, and body text.
- Design at least one reply thread nested under a parent comment.
- Add interaction states for hover, focus, disabled, and empty input.
- Include lightweight metadata actions like like, reply, and more options.
Inspire engagement by adding a feature that highlights the number of active participants in the conversation.