{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"integration-cards","type":"registry:component","title":"Integration cards","description":"App connect grid, single-integration consent and sync health cards — optimistic connect, spring permission switches and a failed sync that heals on retry.","author":"GetUrUI ","dependencies":["motion","lucide-react"],"registryDependencies":[],"files":[{"path":"registry/geturui/examples/integration-cards/connect-grid.tsx","type":"registry:component","target":"components/examples/integration-cards/connect-grid.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { CheckCircle2, LoaderCircle, Plus } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type IntegrationGlyph = \"ring\" | \"diamond\" | \"stack\" | \"wave\" | \"split\" | \"bolt\";\n\nexport interface IntegrationApp {\n id: string;\n name: string;\n category: string;\n description: string;\n glyph?: IntegrationGlyph;\n connected?: boolean;\n}\n\nexport interface IntegrationGridProps {\n apps?: IntegrationApp[];\n /** Resolve to finish connecting; defaults to a short simulated delay. */\n onConnect?: (id: string) => Promise | void;\n onDisconnect?: (id: string) => void;\n className?: string;\n}\n\ntype Status = \"idle\" | \"connecting\" | \"connected\";\nconst spring = { type: \"spring\", stiffness: 380, damping: 30 } as const;\n\n/** Monochrome mark drawn from simple shapes, so third-party apps never bring their own colours. */\nexport function Glyph({ kind = \"ring\", className }: { kind?: IntegrationGlyph; className?: string }) {\n const shapes: Record = {\n ring: (\n <>\n \n \n \n ),\n diamond: ,\n stack: (\n <>\n \n \n \n \n ),\n wave: ,\n split: (\n <>\n \n \n \n ),\n bolt: ,\n };\n return (\n \n {shapes[kind]}\n \n );\n}\n\n/** Grid of integrations with All/Connected filters and an optimistic connect flow: spinner, then a springy connected state. */\nexport function IntegrationGrid({\n apps = [\n { id: \"lumen\", name: \"Lumen CRM\", category: \"CRM\", description: \"Sync contacts and deal stages.\", glyph: \"ring\", connected: true },\n { id: \"ledgerly\", name: \"Ledgerly\", category: \"Accounting\", description: \"Push paid invoices to your books.\", glyph: \"stack\" },\n { id: \"parcel\", name: \"Parcel\", category: \"Shipping\", description: \"Create labels when orders ship.\", glyph: \"diamond\" },\n { id: \"helio\", name: \"Helio Docs\", category: \"Docs\", description: \"Attach specs to any project.\", glyph: \"split\", connected: true },\n { id: \"quartz\", name: \"Quartz\", category: \"Analytics\", description: \"Stream events to your dashboards.\", glyph: \"wave\" },\n { id: \"relay\", name: \"Relay\", category: \"Automation\", description: \"Trigger workflows on new records.\", glyph: \"bolt\" },\n ],\n onConnect,\n onDisconnect,\n className,\n}: IntegrationGridProps) {\n const reduce = useReducedMotion();\n const [status, setStatus] = React.useState>(() => Object.fromEntries(apps.map((a) => [a.id, a.connected ? \"connected\" : \"idle\"])));\n const [filter, setFilter] = React.useState<\"all\" | \"connected\">(\"all\");\n const timers = React.useRef([]);\n const tabsId = React.useId();\n React.useEffect(() => () => timers.current.forEach((t) => window.clearTimeout(t)), []);\n\n const connectedCount = apps.filter((a) => status[a.id] === \"connected\").length;\n const visible = apps.filter((a) => filter === \"all\" || status[a.id] === \"connected\");\n\n async function connect(id: string) {\n setStatus((s) => ({ ...s, [id]: \"connecting\" }));\n if (onConnect) await onConnect(id);\n else await new Promise((r) => timers.current.push(window.setTimeout(r, 1100)));\n setStatus((s) => ({ ...s, [id]: \"connected\" }));\n }\n\n return (\n
\n
\n
\n

Integrations

\n

Connect the tools your team already uses.

\n
\n
\n {([\"all\", \"connected\"] as const).map((f) => (\n setFilter(f)}\n className={cn(\n \"relative h-7 rounded-full px-3 text-[12px] font-medium outline-none transition-colors focus-visible:shadow-[var(--focus-ring)]\",\n filter === f ? \"text-ink\" : \"text-ink-subtle hover:text-ink\",\n )}\n >\n {filter === f && }\n \n {f === \"all\" ? \"All\" : \"Connected\"}{\" \"}\n {f === \"all\" ? apps.length : connectedCount}\n \n \n ))}\n
\n
\n\n \n \n {visible.map((a) => {\n const st = status[a.id];\n return (\n \n
\n \n \n \n {\n if (st === \"connected\") {\n setStatus((s) => ({ ...s, [a.id]: \"idle\" }));\n onDisconnect?.(a.id);\n } else connect(a.id);\n }}\n className={cn(\n \"inline-flex h-8 shrink-0 items-center gap-1 rounded-full px-3 text-[12px] font-medium outline-none transition-colors focus-visible:shadow-[var(--focus-ring)]\",\n st === \"connected\" ? \"text-ink-muted hover:bg-surface-hover hover:text-ink\" : \"border border-border-strong text-ink hover:bg-surface-hover\",\n )}\n >\n {st === \"connecting\" ? (\n \n ) : st === \"connected\" ? (\n \"Disconnect\"\n ) : (\n <>\n \n Connect\n \n )}\n \n
\n
\n

\n {a.name} · {a.category}\n

\n \n {st === \"connected\" ? (\n \n Connected and syncing\n \n ) : (\n \n {a.description}\n \n )}\n \n
\n \n );\n })}\n \n {visible.length === 0 &&
  • Nothing connected yet. Pick a tool from All to get started.
    • }\n     \n
    \n );\n}\n"},{"path":"registry/geturui/examples/integration-cards/detail.tsx","type":"registry:component","target":"components/examples/integration-cards/detail.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { Eye, FileText, Lock, Pencil, ShieldCheck, Users } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface IntegrationPermission {\n id: string;\n title: string;\n description: string;\n icon?: \"read\" | \"write\" | \"people\" | \"files\";\n /** Cannot be turned off. */\n required?: boolean;\n defaultGranted?: boolean;\n}\n\nexport interface IntegrationDetailProps {\n app?: string;\n appMonogram?: string;\n workspace?: string;\n workspaceMonogram?: string;\n publisher?: string;\n permissions?: IntegrationPermission[];\n /** Receives the ids of granted permissions. */\n onAuthorize?: (granted: string[]) => void;\n onCancel?: () => void;\n className?: string;\n}\n\nconst icons = { read: Eye, write: Pencil, people: Users, files: FileText };\nconst spring = { type: \"spring\", stiffness: 420, damping: 30 } as const;\n\n/** Consent card for a single integration: linked marks, a permissions list with spring switches and an authorize flow that resolves into a drawn check. */\nexport function IntegrationDetail({\n app = \"Ledgerly\",\n appMonogram = \"L\",\n workspace = \"Fieldnote\",\n workspaceMonogram = \"F\",\n publisher = \"Ledgerly Inc. · Verified publisher\",\n permissions = [\n { id: \"read\", title: \"Read invoices and payouts\", description: \"Needed to match payments to your books.\", icon: \"read\", required: true },\n { id: \"write\", title: \"Create draft invoices\", description: \"Drafts stay unsent until you approve them.\", icon: \"write\", defaultGranted: true },\n { id: \"people\", title: \"View customer contacts\", description: \"Name, company and billing email only.\", icon: \"people\", defaultGranted: true },\n { id: \"files\", title: \"Attach receipts\", description: \"Upload PDFs to matching transactions.\", icon: \"files\" },\n ],\n onAuthorize,\n onCancel,\n className,\n}: IntegrationDetailProps) {\n const reduce = useReducedMotion();\n const [granted, setGranted] = React.useState>(() => Object.fromEntries(permissions.map((p) => [p.id, !!(p.required || p.defaultGranted)])));\n const [phase, setPhase] = React.useState<\"review\" | \"working\" | \"done\">(\"review\");\n const uid = React.useId();\n const count = Object.values(granted).filter(Boolean).length;\n\n React.useEffect(() => {\n if (phase !== \"working\") return;\n const id = window.setTimeout(() => setPhase(\"done\"), 1100);\n return () => window.clearTimeout(id);\n }, [phase]);\n\n const mark = (m: string, strong?: boolean) => (\n \n {m}\n \n );\n\n return (\n
    \n
    \n
    \n {mark(workspaceMonogram, true)}\n \n \n \n {mark(appMonogram)}\n \n \n \n
    \n

    \n Connect {app} to {workspace}\n

    \n

    \n \n {publisher}\n

    \n
    \n\n \n {phase !== \"done\" ? (\n \n

    {app} will be able to

    \n
      \n {permissions.map((p) => {\n const Icon = icons[p.icon ?? \"read\"];\n const on = granted[p.id];\n return (\n
    • \n \n \n \n
      \n

      \n {p.title}\n

      \n

      {p.required ? \"Required · \" : \"\"}{p.description}

      \n
      \n setGranted((g) => ({ ...g, [p.id]: !g[p.id] }))}\n className={cn(\n \"relative h-6 w-10 shrink-0 rounded-full p-0.5 outline-none transition-colors focus-visible:shadow-[var(--focus-ring)] disabled:cursor-not-allowed\",\n on ? \"bg-ink\" : \"bg-ink/15\",\n p.required && \"opacity-50\",\n )}\n >\n \n \n
      • \n );\n })}\n
    \n
    \n \n Cancel\n \n {\n setPhase(\"working\");\n onAuthorize?.(Object.keys(granted).filter((k) => granted[k]));\n }}\n className=\"relative inline-flex h-10 flex-[1.4] items-center justify-center overflow-hidden rounded-full bg-volt text-[13px] font-medium text-on-volt outline-none focus-visible:shadow-[var(--focus-ring)]\"\n >\n {phase === \"working\" && (\n \n )}\n \n {phase === \"working\" ? \"Authorizing…\" : `Authorize ${count} permission${count === 1 ? \"\" : \"s\"}`}\n \n \n
    \n     \n ) : (\n \n \n \n \n \n

    {app} is connected

    \n

    \n {count} of {permissions.length} permissions granted. You can change them in Settings at any time.\n

    \n setPhase(\"review\")}\n className=\"mt-4 rounded-full px-3 py-1.5 text-[12.5px] font-medium text-ink-muted outline-none transition-colors hover:bg-surface-hover hover:text-ink focus-visible:shadow-[var(--focus-ring)]\"\n >\n Review permissions\n \n \n )}\n     \n
    \n );\n}\n"},{"path":"registry/geturui/examples/integration-cards/sync-status.tsx","type":"registry:component","target":"components/examples/integration-cards/sync-status.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { CheckCircle2, LoaderCircle, OctagonAlert, RefreshCw } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface SyncRun {\n id: string;\n /** e.g. \"Oct 2, 09:14\". */\n at: string;\n ok: boolean;\n /** Seconds the run took; sets the bar height. */\n seconds: number;\n}\n\nexport interface SyncStatusCardProps {\n app?: string;\n appMonogram?: string;\n runs?: SyncRun[];\n /** Shown while the latest run is failed. */\n error?: string;\n records?: number;\n /** Records the simulated retry syncs. */\n retryRecords?: number;\n /** Timestamp label the retry run gets. */\n retryAt?: string;\n nextRun?: string;\n defaultAutoSync?: boolean;\n /** Resolve when your real retry finishes; defaults to a simulated run. */\n onRetry?: () => Promise | void;\n onAutoSyncChange?: (on: boolean) => void;\n className?: string;\n}\n\nconst spring = { type: \"spring\", stiffness: 380, damping: 32 } as const;\nconst nf = new Intl.NumberFormat(\"en-US\");\n\n/** Sync health card: run history bars, a failure that collapses away on retry, a live record counter and an auto-sync switch. */\nexport function SyncStatusCard({\n app = \"Ledgerly\",\n appMonogram = \"L\",\n runs = [\n { id: \"r1\", at: \"Sep 30, 06:00\", ok: true, seconds: 42 },\n { id: \"r2\", at: \"Sep 30, 12:00\", ok: true, seconds: 38 },\n { id: \"r3\", at: \"Sep 30, 18:00\", ok: true, seconds: 51 },\n { id: \"r4\", at: \"Oct 1, 00:00\", ok: true, seconds: 29 },\n { id: \"r5\", at: \"Oct 1, 06:00\", ok: true, seconds: 44 },\n { id: \"r6\", at: \"Oct 1, 12:00\", ok: false, seconds: 12 },\n { id: \"r7\", at: \"Oct 1, 18:00\", ok: true, seconds: 63 },\n { id: \"r8\", at: \"Oct 2, 00:00\", ok: true, seconds: 35 },\n { id: \"r9\", at: \"Oct 2, 06:00\", ok: true, seconds: 40 },\n { id: \"r10\", at: \"Oct 2, 09:14\", ok: false, seconds: 9 },\n ],\n error = \"Ledgerly rejected 3 invoices with a missing tax ID. Fix them or retry to skip them.\",\n records = 12480,\n retryRecords = 318,\n retryAt = \"Oct 2, 09:41\",\n nextRun = \"12:00\",\n defaultAutoSync = true,\n onRetry,\n onAutoSyncChange,\n className,\n}: SyncStatusCardProps) {\n const reduce = useReducedMotion();\n const [history, setHistory] = React.useState(runs);\n const [phase, setPhase] = React.useState<\"idle\" | \"syncing\">(\"idle\");\n const [synced, setSynced] = React.useState(0);\n const [auto, setAuto] = React.useState(defaultAutoSync);\n const last = history[history.length - 1];\n const failed = !last.ok;\n const max = Math.max(...history.map((r) => r.seconds));\n const autoId = React.useId();\n const [extra, setExtra] = React.useState(0);\n const runNo = React.useRef(0);\n const total = records + extra;\n\n const finish = React.useCallback(() => {\n runNo.current += 1;\n const id = `retry-${runNo.current}`;\n setHistory((h) => [...h.slice(1), { id, at: retryAt, ok: true, seconds: 31 }]);\n setExtra((e) => e + retryRecords);\n setPhase(\"idle\");\n }, [retryAt, retryRecords]);\n\n React.useEffect(() => {\n if (phase !== \"syncing\" || onRetry) return;\n if (synced >= retryRecords) {\n const id = window.setTimeout(finish, 250);\n return () => window.clearTimeout(id);\n }\n const id = window.setTimeout(() => setSynced((n) => Math.min(retryRecords, n + Math.ceil(retryRecords / 18))), 70);\n return () => window.clearTimeout(id);\n }, [phase, synced, retryRecords, onRetry, finish]);\n\n async function retry() {\n setSynced(0);\n setPhase(\"syncing\");\n if (onRetry) {\n await onRetry();\n finish();\n }\n }\n\n const pill =\n phase === \"syncing\"\n ? { cls: \"bg-info/12 text-info\", Icon: LoaderCircle, label: \"Syncing\", spin: true }\n : failed\n ? { cls: \"bg-danger/12 text-danger\", Icon: OctagonAlert, label: \"Failed\", spin: false }\n : { cls: \"bg-success/12 text-success\", Icon: CheckCircle2, label: \"Healthy\", spin: false };\n\n return (\n
    \n
    \n \n {appMonogram}\n \n
    \n

    {app} sync

    \n

    \n Last run {last.at}\n

    \n
    \n \n \n \n {pill.label}\n \n \n
    \n\n \n {failed && phase === \"idle\" && (\n \n

    \n \n {error}\n

    \n \n )}\n     \n\n
    \n
    \n
    {phase === \"syncing\" ? \"Records this run\" : \"Records synced\"}
    \n
    {nf.format(phase === \"syncing\" ? synced : total)}
    \n
    \n
    \n
    Next scheduled run
    \n
    {auto ? nextRun : \"Paused\"}
    \n
    \n
    \n\n
    \n

    \n Last {history.length} runs\n \n {history.filter((r) => !r.ok).length} failed\n \n

    \n
      \n \n {history.map((r) => (\n \n \n {r.at}: {r.ok ? \"succeeded\" : \"failed\"} in {r.seconds} seconds\n \n \n ))}\n \n
    \n
    \n\n
    \n \n \n \n {phase === \"syncing\" ? \"Syncing…\" : failed ? \"Retry sync\" : \"Sync now\"}\n \n
    \n
    \n );\n}\n"},{"path":"LICENSE-geturui.md","type":"registry:file","target":"LICENSE-geturui.md","content":"MIT License\n\nCopyright (c) 2026 geturui.com\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"}],"categories":["examples","integrations","apps","connect","oauth","permissions","sync","status","settings"],"meta":{"tier":"free","license":"MIT","docs":"https://geturui.com/docs/integration-cards"}}