Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Comments blocks

Pro

Comments Export Reporting Block for React

Turn one thread into a formatted document: choose minutes, a transcript or an issue summary, include resolved comments, reactions and edit marks, preview it, and save a Markdown or JSON file.

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

Hand a discussion to people who were not in it, with this thread export for React with Base UI. A compact header names the thread and a hairline frame holds a preview and an options cell divided by a rule; on a phone the options come first. The options are three template cards built from native radios (Meeting minutes with Attendees, Decisions and Actions taken from marked comments, Plain transcript, Issue summary), three checkboxes (resolved comments, reactions, edit marks), a Segment Group for the file type (.md or .json) and the one primary, a Shine Button that downloads. The preview is a formatted document with a title, headings and lists, not a block of monospace, and it rebuilds as you change a template or a switch. The file is built from the same data as the preview, in the page, and saved. It is built from Segment Group, Shine Button and Guides, with native radios and checkboxes and a CSS entrance only. For meeting notes, support handovers and any thread that ends as a record.

FAQ

How do I use my own thread?

Edit REMARKS: an ISO at, who wrote it, the body, a mark (decision, action, question or note), a due date for actions, and whether it was edited, resolved or reacted to. Each template is a small function that turns those into sections, so a new template is one more function and one more entry in TEMPLATES.

What does the download contain?

Markdown writes a title, the date line and a heading and bullet list for each section. JSON writes the same sections as data with the template name and the date. Sections with nothing in them are left out of both and of the preview. The file is built as a Blob in the page and saved with a download link.

What do the switches change?

Resolved comments adds the comments marked resolved, which are left out by default. Reactions adds a count after a line, and Edit marks adds (edited) after a line that was changed. The preview and the file change together, and the line count in the preview heading updates.

What stays local?

The thread, the choices and the file. Nothing is uploaded. There is no print or PDF step in this demo; a real app can add one by rendering the same sections server-side. To make the marks real, store a mark on each comment when it is posted instead of guessing from the words.

Is it accessible?

Templates and switches are native radios and checkboxes inside fieldsets with legends, each with its description tied to it. The preview is a labelled region you can reach with Tab, its headings and lists are real elements, and a polite status line says what was previewed or saved.

How does it look on a phone?

The options come first, with the download button at the end of them, and the preview sits under them at a fixed height that scrolls inside itself.

All 100 comments blocks