shadcn.io is not affiliated with official shadcn/ui
Pinned Comments Integration Detail Block for React
An integration detail section for a preview review tool connecting to Vercel: a split with the access it asks for as three scope rows, three steps, a connect action, and a framed browser drawing with two numbered pins and the comment threads they open, each with a Resolve button.
Installation
Overview
An integration detail section for React with Base UI, written for Stagehouse, a fictional review tool for preview deployments, and its Vercel connection. A split sits behind a divider that runs from the top rule to the block's foot. At the start: a title and one sentence, then under a band rule the access it asks for as three rows (Deployments, Projects, Deployment checks), each with its scope in code, Read and Write badges and the reason, and under the next rule three numbered steps. At the end: the mark pair above a "Connect Vercel" Shine Button and a "View docs" link, then a framed figure. A browser is drawn in greyscale boxes with two numbered pins on its page, and under it sit the comment threads those pins open, each with a Resolve button. Resolving changes the page only: the pin turns hollow, the thread says Resolved, and a polite status line counts the open threads. It's built from Guides, Badge, Button and ShineButton, with your theme's tokens for every colour. Vercel is named in text only: no Vercel logo, colour or wordmark ships with the block, and both tiles are icon slots for logos you have the rights to use. The comments are example data; nothing is sent.
FAQ
Which Vercel permissions does it ask for?
Three, shown as rows: read access to deployments and to projects, and read and write access to deployment checks. They are the deployment, project and deployment-check scopes an integration can request from Vercel. Comments are not a Vercel permission here: Stagehouse keeps them itself, and the block says so.
How do I change the threads and the scopes?
PERMISSIONS holds each row: its name, scope, access (Read, Write or both) and purpose, and the "3 read, 1 write" count is worked out from them. THREADS holds each pin's comments. Add a thread and its row appears; the pin is drawn at fixed spots on the page, so move the two Pin positions to match.
Do the Connect button and Resolve do anything real?
No. Both links go to "#", and Resolve only changes this page: the status line says "Nothing is sent to Vercel". Wire your own install flow and handlers.
How do keyboard and screen reader users work it?
The browser drawing and its pins are hidden from assistive technology; the same threads are a labelled list of real comments. Each Resolve button is named with its pin ("Resolve the thread on pin 1"), and the status line is a polite live region present from load.
Does anything move when I resolve a thread?
No. The state word and the button keep fixed widths and swap text only, and the status line reserves its lines.
How does it behave on a phone and in right-to-left layouts?
On a phone the title comes first, then the connect cell, the browser drawing and its threads, the scope rows and the steps, each under a rule. In a right-to-left layout the split mirrors; the browser keeps its own direction because it draws an English page.
Related
- Pro
Branch Patterns Setup Integration
Choose and verifyAn integration setup section for a preview-review tool connecting to Vercel: four ruled rows (a listbox of projects, a tags field of branch patterns, a switch to block the merge, a check of the latest preview) and a foot band with a Finish setup Shine Button.
- Pro
Preview Gallery Grid Integration
Cards and previewsAn integration grid section for a preview-review tool listing Vercel previews: a toggle that filters by build state, a derived tally, and six cells in shared hairlines, each with a drawn page, its branch, build state and open threads.
- Pro
Resolvable Threads List Integration
Grouped and triagedAn integration list section for a preview-review tool reading comments on a Vercel preview: a derived merge verdict with a progress bar, then thread rows with overlapped initials, a page path, the first words and a Resolved checkbox.
- Pro
Reminder Thread Integration Detail
With a product drawingAn integration detail section for a clinic reminder tool connecting to Twilio: a reverse split with a patient's phone drawn in outline showing a reminder, a one-letter reply and the confirmation, a connect action, what it sends, reads and never reads, and three steps.
- Pro
Slack Detail Integration
Scopes and stepsAn integration detail section for a spend tool connecting to Slack: a header with the mark pair and Add to Slack, then what it does, the Slack scopes it reads and writes, three steps to install and the listing's facts.
- Pro
Dunning Schedule Detail Integration
Scopes and stepsAn integration detail section for a failed-payment recovery tool connecting to Stripe: the dunning schedule as four hairline cells, a None, Read and Write table of what a restricted key allows, three steps and a Connect Stripe Shine Button.