Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chat blocks

Pro

Writing Assistant Chat Block for React

A writing coach's thread whose composer is a tall field with a live word count against a goal of 100, 300 or 500, a progress bar, and Log entry, which posts the entry, a quiet row with the running total and a coach reply that depends on the total.

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

Keep a daily writing habit in conversation, with this writing assistant chat for React with Base UI. A hairline frame holds a window of fixed height for Quillcoach, a writing coach: Ines Dalgleish reads what you write and counts. The composer is a taller Textarea with a live count such as 84 of 300 words, a Progress bar against the goal and a Toggle Group to set the goal to 100, 300 or 500. Log entry, the one Shine Button, posts the entry as a bubble, adds a quiet row with the entry's words and today's running total, and the coach answers with a typed line that depends on the total against the goal. There are no suggestions or rewrites.

FAQ

What stays in the page, and how do I make it real?

Everything. Counting words, the bar, the running total and the coach's line are computed in the page from your text and the goal. The coach's prompts are three typed lines and no model reads your writing. To wire it for real, save the entry from send to your journal and load today's total from it.

How does the goal work?

The goal switch sets the number the bar and the count read against, and the coach's reply uses the same number. Below it the reply is a prompt plus how many words are still to go; at or past it the reply is a cheer. Changing the goal never changes the total.

How are words counted?

Text is trimmed and split on whitespace, so a hyphenated word counts once and an empty field counts zero. The count and the bar update on every keystroke, and the total only changes when you log an entry.

Is it usable with a keyboard and a screen reader?

The log is a focusable region announced as a log. The field has a hidden label and a description, the goal switch is a labelled group, Enter adds a line so long writing is not sent by accident, and the result of logging is in the status line.

How does it look on a phone?

The same single column. The field, the count, the bar and the goal switch stack under the log, which keeps the rest of the window and scrolls on its own.

All 200 chat blocks