shadcn.io is not affiliated with official shadcn/ui
Contract Negotiation Chat Block for React
A buyer and seller settle six contract clauses one at a time: each clause card marks the proposed edit, says whose turn it is, and offers Agree or Counter, with a clauses pane that counts how many are agreed.
Installation
Overview
Settle a contract clause by clause in the conversation, with this contract negotiation chat for React with Base UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Clauseway, a procurement tool: the top bar names the seller's contracts lead, Cosima Tennerhill, with a count such as "3 of 6 agreed", and the log is Message and Bubble rows with clause cards in it. A card shows one clause with the proposed edit marked, an inserted figure underlined and a removed one struck through with "Added" and "Removed" read out, whose turn it is, and a status of Open or Agreed. Agree locks the clause with "Agreed by both" and a lock; Counter opens a field and posts your terms, and a typed reply flips the turn back with her own figure. A clauses pane at the end lists the six with where each stands. The composer's Shine Button is the only colored control, and on a phone a Chat and Clauses switch shows one pane at a time. It's the starting point for a procurement tool, a deal room or any turn-taking review.
FAQ
What stays in the page, and how do I make it real?
All of it. The six clauses, their statuses and the seller's replies are typed in the file or kept in this page's state and are gone on reload; nothing is signed or sent and no model runs, as the line under the composer says. To wire it for real, send each Agree and Counter to your deal service where agree and sendCounter run and update the clause list as the other side answers.
How does the turn-taking work?
Each clause has a status and a turn: you, them, or none once it is agreed. Only your own open clause shows Agree and Counter. Countering hands the turn to the seller and a typed reply returns it with a compromise figure; agreeing brings the next clause up for you. The header count, the pane and every card read the same list.
How is the proposed edit shown without color?
A removed figure is struck through and an added one underlined, and each is preceded by a hidden "Removed:" or "Added:" so a screen reader says the same thing. Status is a glyph and a word, a lock for Agreed, never a color.
How is this different from the contract reviewer?
The reviewer block is one person marking up a clean copy with tracked changes. This one is two parties taking turns on a clause, and the thread is where the offers and counter-offers are recorded.