shadcn.io is not affiliated with official shadcn/ui
Page Tree Notion Integration Block for React
An 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.
Installation
Overview
An integration detail section for React with Base UI, written for Noteweir, a fictional tool that files meeting notes in a database, and its Notion connection. A header names both ("Noteweir for Notion") with one sentence. Behind a split divider that runs from the top rule to the block's foot sit the mark pair (Noteweir's own tile and Notion's neutral lettermark tile), a Connect Notion Shine Button, a quiet Disconnect and a polite status line. Under a band rule, the start column offers three capability checkboxes (Read content, Insert content and Update content, the names Notion uses; the first two are needed to file notes, so Connect waits with a reason in words if either is off) and how it works in three steps. The end column shows the workspace as a tree in a window: each of the two top-level entries has a Shared switch, the pages inside inherit it, the ones not shared read Not shared, and the count of pages Noteweir can see is worked out from the tree. Nothing connects: every control changes this page only. Notion is named in text only, with no logo, colour or wordmark; the workspace is example data. It's built from Guides, Checkbox, Switch, Tree View, Button and Shine Button, with CSS transitions and your theme's tokens.
FAQ
Does Connect Notion connect to Notion?
No. It moves the block to a Connected in this demo state and the status line says so, with the number of pages Noteweir can see and that nothing was sent to Notion. Point it at your own OAuth or integration flow. Changing a checkbox after connecting turns the connection off again, since the capabilities changed.
Are these Notion's real capabilities?
Read content, Update content and Insert content are the three content capabilities Notion asks an integration to declare. Filing a note needs to read a database's properties and to add a page, so those two are marked needed; Update content is optional, for editing pages Noteweir wrote earlier. Edit CAPABILITIES to match what your integration really requests.
Why does sharing one entry share its pages?
Because Notion works that way: when you share a page or database with an integration, the pages inside it come too. The tree shows it by tying every page to its top-level entry, so switching a top-level entry off turns its whole branch to Not shared, and the count follows. In your product the tree would come from the pages Notion reports as shared.
How does the tree work with a keyboard and a screen reader?
It is the catalog's Tree View on every base: arrow keys move between rows, Right and Left open and close a branch, and every row is named in text with its state ("Meeting notes, Shared"). The Shared switches are separate controls in the tab order, each named for the entry it shares. The tree opens fully on load, so all eleven pages are visible.
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?
Below lg the divider gives way to rules between the parts, which stack in reading order: header, mark pair and buttons, capabilities, steps, then the tree. In a right-to-left layout the columns, the step rail, the switches and the tree's chevrons flip, while the count keeps its own direction. The header fades up once on load with a CSS transition, dropped under reduced motion.
Related
- 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
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
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
Can and Cannot Detail Integration
Scopes and stepsAn integration detail section for a release-notes tool installing on GitHub: a header with the mark pair and Install on GitHub, then two columns sharing a divider, the read-only permissions it uses and the ones it has no access to.
- Pro
Tree View Org Chart Team
Leaders and org chartsA split org chart for a ride-share fleet: copy, an Expand all button and three figures at the start, and a working tree of twenty-two people at the end, with a band that names the picked person's manager and reports.