shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Edit one draft with other people without overwriting each other, with this paragraph-lock editor for React with React Aria. A compact header names the draft and holds a Pause teammates button. The first band shows who is in the draft and what each person is doing. Under it three paragraphs sit on a rail: the rail shows the initials of whoever holds a paragraph and the row says "Wrenna is editing". A free paragraph offers Edit, which gives you its lock, a Textarea and Save and Release; a locked one offers "Ask Wrenna to release", which only notes the request. Two teammates are a script: a few steps four seconds apart that lock, save and release paragraphs once and then stop, so you can watch a lock appear and a paragraph change. A line under the draft says when it was last saved and how many times in this demo. It is built from Textarea, Button, Shine Button, Avatar and Guides, with a CSS entrance only. For writing tools and wikis where two people can open the same page.
FAQ
Who are the other people?
They are a script, not people: five steps in SCRIPT, one every four seconds (Wrenna saves paragraph 2, Hartley takes and saves paragraph 3, Wrenna takes and releases paragraph 1), and then it stops. A step that cannot happen, because you hold that paragraph, is skipped with a note. Pause teammates stops the clock and Resume plays on; with reduced motion on, they start paused.
How do the locks work?
A paragraph has one holder at most. You can take a free paragraph (and only one at a time), and nobody else can edit it until you save or release it. Save writes your text to the paragraph and frees it; Release frees it and drops your changes. Asking someone to release only records that you asked in this demo.
What stays local, and how do I make it real?
Everything; nothing is shared, saved or sent. For real, keep each lock on the server with an owner and an expiry that a heartbeat renews, broadcast lock changes over a socket, save a paragraph with the version it was based on, and release locks of people who disconnect. For finer collaboration, replace paragraph locks with a CRDT.
Is it accessible?
The rail initials are hidden from screen readers and the state is in words in every row ("Free to edit", "You are editing"). Taking a lock moves focus into the editor, saving or releasing returns it to the paragraph's button, and one polite line speaks what changed, including what the script did. Pause teammates is a real button, and the script is off when reduced motion is on.
