shadcn.io is not affiliated with official shadcn/ui
Menu Path Setup Notion Integration Block for React
An 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.
Installation
Overview
An integration setup 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 names the product and the service, with the mark pair (Noteweir's own tile and Notion's neutral lettermark tile) at its end. Under a band rule, three cells on shared hairlines walk the path through Notion, each with a greyscale drawing of the screen it describes: the integration's settings with its secret and a Copy button (the first cell also holds the password field to paste the secret into), the page's three-dot menu with Connections picked, and the Connections list with Noteweir ticked. Under another band rule, Check access lists the three pages of an example workspace after about a second: two are found, and one has a lock because it was never shared. A Shine Button, Finish setup, waits for the check and ends on Connected in this demo, with a quiet Disconnect. A polite status line, present from load, says what stays local. Nothing is sent to Notion, and the secret is read by this page only. Notion is named in text only, with no logo, colour or wordmark; the workspace and its pages are example data.
FAQ
Does Check access call Notion?
No. It waits about 900 ms, then shows the three example pages: two found and one not shared. Nothing is sent anywhere, the secret you type stays in this page's memory, and the status line says so. In your product, check access would use the secret to ask Notion which pages were shared with the integration, and show what comes back.
Why does one page show a lock?
Because Notion only shows an integration the pages that were shared with it. A page nobody added the connection to stays out of sight entirely, so a real check can't list it; the block draws it with a lock so a buyer can see what Not shared means. Edit PAGES to change the example workspace.
Are the drawings Notion's screens?
They are neutral greyscale sketches of the three places a person goes: where an integration's secret is copied from, a page's three-dot menu with a Connections item, and a list of connections with the product ticked. They are not copies of Notion's interface, and nothing in them is drawn from its logo or colours. The words beside them, and the real names, are in text.
When does Finish setup become available?
After a secret is pasted and Check access has run. Until then the button is marked unavailable but stays focusable, and a line says "Check access first." Pressing it anyway puts the reason in the status line. Editing the secret afterwards clears the check, so the result can't outlive the input it came from. Disconnect clears everything.
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 the three cells stack and each keeps its number, title and drawing, with the one-line explanation hidden so the block stays short. In a right-to-left layout the cells and the check's columns flip, while the drawings keep their left-to-right order as screens do. 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
Conflict Resolver Notion Integration
Grouped and triagedAn 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.
- Pro
Live Record Setup Mailchimp Integration
Keys and codeAn integration setup for a signup-form tool connecting to Mailchimp: three steps (audience, consent, tags) beside the JSON request one signup would send, which changes as you choose.
- Pro
Frame Thumbnails Setup Integration
Guided stepsAn integration setup section for a design-docs tool connecting to Figma, in one framed window: paste a personal access token, tick greyscale wireframe thumbnails of the frames to link, name the link and watch its address follow, then finish with an honest result.
- Pro
GitHub Setup Integration
Guided stepsAn integration setup section for a release-notes tool installing on GitHub: a progress strip and three bands to pick an account from radio cards, choose All or Only select repositories, and tick repositories under a Free plan limit of five, with Finish setup that waits for a valid choice.