Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Error blocks

Pro

Sync Conflict Error Block for Svelte

A panel for two people who changed the same document: ruled rows for the fields that differ, each with Yours and Theirs as native radio cells, a Keep all toggle, a merged result that rebuilds as you choose, and the unchanged fields in a collapsible.

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

Let people merge field by field instead of picking a whole file, with this sync conflict panel for Svelte with Ark UI. It's the panel Scribbleset, a shared-docs app, shows when two people changed the same brief: a compact header over one framed panel on plus-marked corners made with Guides. A Toggle Group says "Keep all mine" or "Keep all theirs" for every field at once. Under it, the three fields that differ (Target audience, Duration, Channel) are ruled rows, each with two native radio cells, Yours and Theirs, side by side on wide screens and stacked on a phone; nothing is chosen at first. A merged result rebuilds as you choose, with each field's text and where it came from, and the Shine Button "Apply merge" names the fields you still have to choose, or says it merged in this demo. The four fields that did not change sit in a Collapsible under the foot. It's built from Toggle Group, Collapsible, Shine Button, Button and Guides, with a CSS entrance only. For any editor where two people can change the same record.

FAQ

What does Apply merge do?

Nothing is synced. With fields still to choose it says which ones ("Choose for Duration and Channel.") and moves focus to the first one's Yours cell, so the first press is never a dead end. With every field chosen it waits a moment and says in a polite status line that it merged in this demo. In your app, send the merged values from the submit handler and show your server's answer in the same line.

How does it know which fields differ?

Each field is typed once with what you wrote and what the other editor wrote, and the page compares the two texts: the fields whose texts differ become the ruled rows, the rest go in the collapsible. Edit a field's text and it moves between the two lists by itself, and the counts, the merged result and the "Plus 4 fields" line follow.

How do the Keep all buttons work with the radios?

They are two ends of the same state. Pressing one chooses that side for every row; choosing the radios by hand to the same side lights the same button, and any mix leaves both off. Pressing the lit button again clears every choice. The merged result and the count move with it.

Why radio cells and not two file cards?

A conflict on one document is rarely all or nothing. Per field the choice is one of two texts, so each row is a native radio group with a name and a label, keyboard and screen reader ready, and you can see the two texts next to each other with their save times. The merged result then shows what you would end up with before anything is applied.

Why is the collapsible under the foot?

Opening it adds rows below everything else, so the merged result and the Apply merge button never move when you look at the unchanged fields. They are read-only: both versions agree, so there is nothing to choose.

How does it look on a phone?

Yours and Theirs stack inside each row, the merged result keeps one line per field, and the status line and Apply merge are pinned to the foot of the screen until you reach them.

All 100 error blocks