shadcn.io is not affiliated with official shadcn/ui
Conflict Resolver Notion Integration Block for React
An integration list for a meeting-notes tool writing to Notion: four pages edited in both places, each with its two values side by side and a segmented Keep choice, a derived count and a Resolve all button.
Installation
Overview
An integration list section for React with Base UI, written for Noteweir, a fictional tool that files meeting notes in a database, and its Notion connection. A compact header says Noteweir won't overwrite either side, with the mark pair (Noteweir's own tile and Notion's neutral lettermark tile) at its end. Under a band rule, a polite status line sits beside a derived count ("1 of 4 resolved") and an outline Resolve all button. Four pages edited in both places follow as rail-to-rail rows: the page and the property that differs, with its Notion type in code (status, people, rich_text, date), the two versions side by side as In Notion and In Noteweir, and a segmented choice, Keep Notion or Keep Noteweir. A decided row rings the version it kept and says Kept in words, with a line under the choice; an open row says it is not decided yet. Resolve all keeps Notion's version of every open row. The rows never change height. Nothing is sent to Notion. Notion is named in text only, with no logo, colour or wordmark; the pages and their values are example data.
FAQ
Does a choice write to Notion or to my data?
No. Each choice, and Resolve all, changes this page only and the status line says so: "Nothing was sent to Notion". To make it real, call your own endpoint from choose and resolveAll: write the kept version to the side that lost, then mark the row resolved.
What are the codes beside each property?
They are the property's type in Notion's API: status, people, rich_text and date are all property types a database page can have. Showing them tells a developer what kind of value is being resolved. Some Notion property types are computed by Notion and can't be written by an integration at all, so a real list would leave those out; edit CONFLICTS for the properties your product syncs.
What does Resolve all do?
It keeps Notion's version of every row that is still open and leaves the rows you already decided alone. The button says nothing about which side wins, so the status line states it first: "Resolve all keeps Notion's version of every open page". Once every row is decided, the button is marked unavailable but stays focusable.
How does the choice work with a keyboard?
Each choice is a Segment Group named for its page and property ("Version to keep: Weekly sync, Status"). Arrow keys move between Keep Notion and Keep Noteweir and choose as they go. A row with no choice has neither segment selected until you pick one; you can always change a decided row.
Can I show Notion's logo?
The block names Notion in text and ships no logo, colour or wordmark. Its tile is a neutral lettermark, No in a muted square, in an icon slot that a code comment marks: drop in the official mark only if you have the rights to use it under the owner's brand guidelines, and never redraw it.
How does it fit on a phone, in right-to-left layouts and with reduced motion?
On a phone each row stacks: the page, the two versions one above the other, then the choice. In a right-to-left layout the columns flip while the property type codes keep their left-to-right order. The kept version is marked with a ring and the word Kept, not colour alone, and the entrance is a CSS transition dropped under reduced motion.
Related
- Pro
Page Tree Notion Integration
With a product drawingAn integration detail section for a meeting-notes tool connecting to Notion: capability checkboxes, three steps, and a tree of workspace pages where sharing a top-level entry shares its pages, with a derived count of what can be seen.
- Pro
Page Builder Notion Integration
Cards and previewsAn integration grid for a meeting-notes tool writing to Notion: a gallery of six block types on shared hairlines and the outline of the page they build, with move, remove and a limit of two of each.
- Pro
Menu Path Setup Notion Integration
Choose and verifyAn integration setup for a meeting-notes tool connecting to Notion: three cells with a drawing of each screen (the secret, the page menu, the connections list), a secret field, a check that finds two pages and locks one, and a Finish setup.
- Pro
Data Sentences Notion Integration
Rings and talliesAn integration stats section for a meeting-notes tool writing to Notion: one large sentence in which each figure carries a small proportional bar, and a band of three description-list cells, all worked out from one typed list.
- Pro
Day-Grouped Timeline Mailchimp Integration
Grouped and triagedAn integration list for a signup-form tool writing to Mailchimp: subscriber events under day headings, a segmented filter that dims the rest, and Retry sync on the one write that failed.
- Pro
Linear List Integration
Grouped and triagedAn integration list section for a cycle-planning tool reading issues from Linear's Triage: three real tabs, five issue rows with Accept and Decline always visible, a roving keyboard set (J, K, A, D) that only acts inside the list, and a working Retry.