Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Integration blocks

Pro

Conflict Resolver Notion Integration Block for Solid

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.

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

An integration list section for Solid with Ark 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.

All 100 integration blocks