shadcn.io is not affiliated with official shadcn/ui
Grammar Check Comments Block for Ark UI
A comment draft with typed mistakes beside a list of corrections: Apply rewrites that spot in the box, Ignore hides it, Fix all applies the rest, and counts follow before you post.
Installation
Overview
Catch slips before the team reads them, with this grammar check for React with Ark UI. A compact header sits over one framed panel built from bands. The first holds your comment in a Textarea, starting with four typed mistakes: "teh", "alot", "Their going" and a double space. The second lists the corrections a typed rule table finds as you type. Each row says what kind of slip it is in an outline Badge, shows the change ("teh" to "the") and has two buttons: Apply rewrites that spot in the box and Ignore hides it for as long as you keep typing. A ghost Fix all applies what remains, and the counts follow ("2 to fix, 1 applied"). When nothing remains an Empty state says it reads clean. The one primary is a Shine Button that posts the comment to the discussion list at the foot. It is built from Textarea, Badge, Button, Empty, Avatar, Field, Kbd, Shine Button and Guides, with a CSS entrance only. For documents, ticket comments and any writing box that should be tidy before it is shared.
FAQ
How are the corrections found?
By a typed table, RULES, of patterns and replacements: spelling slips, "alot" for "a lot", "their going" for "they're going", and runs of spaces. A replacement keeps a capital letter when the mistake began with one. The block says so: checked by rules, not by a model. Add a row to the table to teach it a new slip.
How do I use a real grammar service?
Replace fixesOf(text, ignored) with a call that returns the same list of { at, from, to, why, key } (a position, the original text, the replacement, a short reason and a stable key for Ignore). Positions should be character offsets in the current text; Apply and Fix all rewrite by them, and Fix all applies from the end so earlier offsets stay true.
How long does Ignore last?
For as long as you keep typing in the same session. Ignore stores the rule and the exact words, so ignoring "alot" hides it everywhere it appears. Posting or restoring the sample clears the ignored list.
What stays local?
The draft, the corrections and the posted comments. Posting adds your text to the discussion list and says "Posted in this demo. Nothing was sent." To make it real, post the text from post to your server and keep the corrections as a client-side aid only.
Is it accessible?
Applied and Ignored are words in the status line, never a colour. Each button carries the word it applies or ignores in hidden text, so a list of Apply buttons is not a list of identical names. The change itself is shown as a struck word and an inserted word, with a spoken "becomes" between them.