shadcn.io is not affiliated with official shadcn/ui
Legal Assistant Chat Block for Ark UI
A paralegal's advice-line thread with a clause card: one lease clause in legal text or plain language, a typed risk word with a glyph, a fold with the reason, a Copy button, and a note that it is not legal advice.
Installation
Overview
Explain a clause in plain words, with this legal assistant chat for React with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Statutehill, a tenancy information service: the top bar names the paralegal, Lorcan Dunthorne, and the log is a day label, a system line, a few runs of Message and Bubble rows and a clause card. The card holds one lease clause in two versions behind a Toggle Group of Legal text and Plain language (both sit in one cell, so switching never moves the page), a risk word, Low, Medium or High, with a glyph shape rather than a color, a Collapsible with the reason, and a Copy button that writes the version on show to the clipboard. Asking about clause 7 brings a second card. Every card and the status line say that it is information and not legal advice. Replies come from a typed script after a Typing Indicator Text, and the composer's Shine Button is the only colored control. It's the starting point for a legal helpline, a tenant portal or a contract Q and A.
FAQ
What stays in the page, and how do I make it real?
All of it. The clauses, their plain-language versions, the risk words and the paralegal's replies are typed in the file, and no model runs. Copy really writes to your clipboard, but nothing else leaves the page. To wire it for real, load the clause from your document store where CLAUSES is read, send the composer's text to your helpline where the code says so, and keep a human or a reviewed process behind the risk word.
Is this legal advice?
No. The top bar, the card and the status line each say so, and the lease, the clauses and the risk words are made up for the demo. A risk word here is a typed label, not a judgment of your situation. A real service needs its own disclaimers and review by someone qualified, so treat this wording as a placeholder for yours.
How does the switch between versions work?
Both versions of the clause sit in the same grid cell and the one you are not reading is hidden from sight and from screen readers, so the card keeps one height and nothing jumps. The switch is a labelled group with a pressed state. The Copy button writes the version on show, and the status line says which one it copied or that the browser refused.
Why is the risk a word and a glyph?
Color alone can't carry meaning, so Low is a ring, Medium a dotted ring and High a triangle, each beside its word inside a badge. The fold under it gives the reason in a sentence, which is also what a screen reader hears.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log and every message starts with a hidden name and time. The card is a labelled heading with a switch, a disclosure button and a Copy button, all reachable by Tab, and the field's description says that Enter sends and Shift and Enter add a line.