App connect grid, single-integration consent and sync health cards — optimistic connect, spring permission switches and a failed sync that heals on retry.
integrationsappsconnectoauthpermissionssyncstatussettings
Connect grid
connect-grid.tsxGrid of apps with All and Connected filters, a connect flow that spins then springs to Connected, and layout-animated filtering.
$npx shadcn@latest add @geturui/integration-cards-connect-grid
| Prop | Type | Default | Description |
|---|---|---|---|
apps | { id; name; category; description; glyph?; connected? }[] | — | Apps; glyph picks a drawn mark. |
onConnect | (id) => Promise<void> | void | — | Awaited before showing Connected; defaults to a short delay. |
onDisconnect | (id) => void | — | Disconnect handler. |
Integration consent
detail.tsxTwo linked marks, a permissions list with spring switches and locked required scopes, and an authorize flow that ends in a drawn check.
$npx shadcn@latest add @geturui/integration-cards-detail
| Prop | Type | Default | Description |
|---|---|---|---|
app / appMonogram / workspace / workspaceMonogram | string | — | The two sides being linked. |
publisher | string | — | Verified publisher line. |
permissions | { id; title; description; icon?; required?; defaultGranted? }[] | — | Scopes; required ones cannot be turned off. |
onAuthorize | (granted: string[]) => void | — | Receives granted scope ids. |
onCancel | () => void | — | Cancel handler. |
Sync status
sync-status.tsxSync health with run-history bars, a failure notice that collapses on retry, a live record counter and an auto-sync switch.
$npx shadcn@latest add @geturui/integration-cards-sync-status
| Prop | Type | Default | Description |
|---|---|---|---|
app / appMonogram | string | — | Integration name and mark. |
runs | { id; at; ok; seconds }[] | — | Recent runs, oldest first. |
error | string | — | Shown while the latest run is failed. |
records / nextRun | number / string | — | Totals and schedule. |
onRetry | () => Promise<void> | void | — | Awaited; defaults to a simulated run. |
defaultAutoSync / onAutoSyncChange | boolean / (on) => void | — | Auto-sync switch. |
Install the whole set
Installs every integration cards variant at once. Each section above has its own command for a single variant.
$npx shadcn@latest add @geturui/integration-cards
Accessibility
- Third-party apps are drawn as neutral monochrome marks with their name in text, so nothing relies on brand colour.
- Permission and auto-sync toggles are role=switch with labels; connect and retry buttons expose busy state.
- Run history bars carry a screen-reader list of each run's time and outcome.