shadcn.io is not affiliated with official shadcn/ui
Document Generator AI Block for React Aria
Draft a report section by section: an outline with a status word and word count per section, a text field with a tone select and Draft this section, a progress bar and Markdown you can copy.
Installation
Overview
Build a long document in pieces instead of one prompt, with this document generator for React with React Aria. A hairline frame with a plus mark on each corner holds the outline of a quarterly operations review at the start: six sections in a list, each with a status word, Empty, Drafted or Edited, and a word count worked out from its text, and under it a Progress bar reading "3 of 6 drafted" with the total words. At the end the chosen section opens in a Textarea with a Native Select for the tone, Formal, Friendly or Direct, and Draft this section, which fills the typed draft for that tone. Four sections have typed drafts in all three tones and two do not, and the page says so beside the button. Typing changes a section's status to Edited. The Shine Button, the only colored control, copies real Markdown assembled from the sections you wrote. Guides rule the bands. For report builders, docs tools and any app that drafts structured text.
FAQ
What stays in the page, and how do I make it real?
Everything. The outline and the twelve typed drafts are in the file, the status words and counts are worked out from the text, and Copy writes to your clipboard. No model writes the drafts and nothing is sent. To make it real, have draft ask your own service for a section's text and keep the outline, statuses and Markdown as they are.
How are the status words decided?
Empty means the section has no text. Drafted means its text is exactly one of the typed drafts. Anything else, a hand-written section or an edited draft, is Edited. The words are not stored; they follow the text.
What does Copy document produce?
A Markdown document: a title, then each written section under a second-level heading, in outline order. Empty sections are left out. If nothing is written yet the status line says to draft a section first.
What about the sections with no typed draft?
Metrics and Appendix have none, so Draft this section tells you to write them yourself. The Metrics section starts with a few lines of hand-written text, which shows the Edited status.