shadcn.io is not affiliated with official shadcn/ui
Integration Sync Status Notification Block for React
Three synced objects (Contacts, Deals, Invoices) with a progress bar, a count that rolls, an errors button that opens a popover of the failing records, and a Sync now per row that runs three typed steps.
Installation
Overview
Show how far a connection has got and what stopped it, with this integration sync notification for React with Base UI. It is Bridgeledger, an accounting tool that copies a CRM, in a hairline frame with a plus mark on each corner. Three rows, Contacts, Deals and Invoices, each with a Progress bar, "8,427 of 12,350" in a Sliding Number that rolls, a state word (Syncing, Up to date or Behind), an errors button that opens a Popover listing the records that failed and why, and Sync now. A press runs three typed steps, one timeout apart, with a Spinner in the button, moves the bar toward the total and clears the errors that were only timeouts; the ones that need a fix stay. A row that is up to date keeps its button quiet. Guides draw the lines. For integration pages, import tools and any copy that can partly fail.
FAQ
How do I fill it with my objects?
Edit THINGS: each has an id, a label, the synced and total counts and its failures, each with a record name, a reason and a transient flag for the ones a retry will clear. The header counts, the bars and the lines are all worked out from that array. In your app pass what your sync job reports and open the popover with the real records.
What stays local in the demo?
Everything. Sync now runs three timeouts that move the counts on this page; nothing is connected, copied or retried on a server, and a reload puts the rows back. The status line says "demo, nothing is copied" when it starts. In your app start the sync from sync and take the progress from your job's events.
Why do some errors stay after a sync?
Because a timeout clears itself and a bad value does not. The records marked transient are cleared when the row finishes; the others (a missing @, a six-digit phone number) need a fix in the CRM, so the popover still lists them and the status line counts them.
What moves on its own?
Only the number and the bar while a sync you started is running, and the spinner in its button, which stops under reduced motion. Nothing loops, and the timeouts are cleared if you leave the page.
Is it accessible?
The bar is hidden from assistive technology because its figures are written for screen readers as "Contacts: 8,427 of 12,350 synced." The errors button names its row and its count, the popover is named and closes with Escape, and a quiet Sync now stays focusable and explains itself.
Related
- Pro
Integration Sync Live Banner
Live statusAn integrations callout for a hub: a live "3 of 4 integrations syncing" count over four connector chips with a status dot each; the disconnected one offers Reconnect, and the count turns to "4 of 4".
- 1,248Pro
Data Sync Live Banner
Live statusA sync callout for a data warehouse: one run plays on load, a counter rolling up to 1,248 records over a thin progress bar, then "Warehouse synced" with a countdown to the next run.
- Pro
Sync Completed Success
Integrations and syncsA confirmation panel for a finished data sync: a table of records created, updated and skipped for four objects with a segmented bar under each name, a switch for a 15-minute schedule with the next run time, and a Sync now button that adds a second run.
- Pro
A job queue's four counters that roll when they change, a progress bar of done over total, a Pause queue that moves running jobs to Paused and re-derives the counts, and a job list with Retry on the failed one.
- Pro
Catch Hook Setup Integration
Keys and codeAn integration setup section for a form tool working with Zapier: three numbered steps (a copyable Catch Hook address, a sample submission, a field check), a Finish setup Shine Button, and a framed JSON tree of the sample, shown first on wide screens.
- Pro
A medal shelf for a learning platform after a learner finishes a first project: eight drawn medals in a hairline grid with a New badge on the latest, and a popover on each medal with its criteria, a progress bar and the day it was earned.