shadcn.io is not affiliated with official shadcn/ui
Menu Path Setup Notion Integration Block for Vue
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 Vue with Ark 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.