Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Integration blocks

Pro

Page Tree Notion Integration Block for Vue

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.

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 detail section for Vue with Ark 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.

All 100 integration blocks