powersync-ja · marknesh · Sep 8, 2026 · Sep 8, 2026 · Sep 9, 2026 · Sep 9, 2026
diff --git a/client-sdks/overview.mdx b/client-sdks/overview.mdx
@@ -5,6 +5,7 @@ sidebarTitle: "Overview"
 ---
 
 import ClientSdks from '/snippets/client-sdks.mdx';
+import { PowerSyncCardGroup } from '/snippets/shared/powersync-card-group.jsx';
 
 PowerSync provides client SDKs for multiple frameworks. Each SDK manages a local SQLite database that syncs with your backend.
 
@@ -14,7 +15,9 @@ For getting started instructions, see our [Setup Guide](/intro/setup-guide).
 
 Select your client framework to get started:
 
-<ClientSdks />
+<PowerSyncCardGroup>
+  <ClientSdks />
+</PowerSyncCardGroup>
 
 ## Common Tasks
 
@@ -37,7 +40,7 @@ Once you've installed an SDK, these guides cover the core functionality:
 
 ## Additional Resources
 
-<CardGroup cols={3}>
+<PowerSyncCardGroup>
   <Card title="ORM Support" icon="layer-group" href="/client-sdks/orms/overview">
     Use type-safe ORMs with PowerSync
   </Card>
@@ -47,5 +50,5 @@ Once you've installed an SDK, these guides cover the core functionality:
   <Card title="Example Projects" icon="folder-open" href="/intro/examples">
     Working demo apps and starter templates
   </Card>
-</CardGroup>
+</PowerSyncCardGroup>
 
diff --git a/client-sdks/reference/capacitor.mdx b/client-sdks/reference/capacitor.mdx
@@ -15,12 +15,13 @@ import SubscribeSyncStreamsIntro from '/snippets/subscribe-sync-streams-intro.md
 import SubscribeSyncStreamsOutro from '/snippets/subscribe-sync-streams-outro.mdx';
 import JavaScriptSubscribeSyncStream from '/snippets/javascript/subscribe-sync-stream.mdx';
 import LocalOnly from '/snippets/local-only-escape.mdx';
+import { PowerSyncCardGroup } from '/snippets/shared/powersync-card-group.jsx';
 
 ```text Build with AI icon="sparkles" wrap
 Install the PowerSync Agent Skills with: npx skills add powersync-ja/agent-skills. Then follow the skills to onboard this project to PowerSync using the Capacitor SDK.
 ```
 
-<CardGroup cols={3}>
+<PowerSyncCardGroup>
   <Card title="PowerSync SDK on NPM" icon="npm" href="https://www.npmjs.com/package/@powersync/capacitor">
     This SDK is distributed via NPM
   </Card>
@@ -36,7 +37,7 @@ Install the PowerSync Agent Skills with: npx skills add powersync-ja/agent-skill
   <Card title="Changelog" icon="megaphone" href="https://github.com/powersync-ja/powersync-js/blob/main/packages/capacitor/CHANGELOG.md">
     Changelog for the SDK
   </Card>
-</CardGroup>
+</PowerSyncCardGroup>
 
 <Warning>
   This SDK is currently in a [**beta** release](/resources/feature-status). 

diff --git a/client-sdks/reference/dotnet.mdx b/client-sdks/reference/dotnet.mdx
@@ -10,6 +10,7 @@ import DotNetWatch from '/snippets/dotnet/basic-watch-query.mdx';
 import GenerateSchemaAutomatically from '/snippets/generate-schema-automatically.mdx';
 import SdkClientSideSchema from '/snippets/sdk-client-side-schema.mdx';
 import LocalOnly from '/snippets/local-only-escape.mdx';
+import { PowerSyncCardGroup } from '/snippets/shared/powersync-card-group.jsx';
 import SubscribeSyncStreamsIntro from '/snippets/subscribe-sync-streams-intro.mdx';
 import SubscribeSyncStreamsOutro from '/snippets/subscribe-sync-streams-outro.mdx';
 import DotnetSubscribeSyncStream from '/snippets/dotnet/subscribe-sync-stream.mdx';
@@ -18,7 +19,7 @@ import DotnetSubscribeSyncStream from '/snippets/dotnet/subscribe-sync-stream.md
 Install the PowerSync Agent Skills with: npx skills add powersync-ja/agent-skills. Then follow the skills to onboard this project to PowerSync using the .NET SDK.
 ```
 
-<CardGroup cols={3}>
+<PowerSyncCardGroup>
   <Card title="PowerSync SDK on NuGet" icon="nuget" href="https://www.nuget.org/packages/PowerSync.Common/">
     This SDK is distributed via NuGet
   </Card>
@@ -38,7 +39,7 @@ Install the PowerSync Agent Skills with: npx skills add powersync-ja/agent-skill
   <Card title="Changelog" icon="megaphone" href="https://releases.powersync.com/announcements/powersync-net-sdk">
     Changelog for the SDK
   </Card>
-</CardGroup>
+</PowerSyncCardGroup>
 
 <Note>
   This SDK is currently in a [**beta** release](/resources/feature-status). It is production-ready for tested use cases. APIs are stable, and we communicate breaking changes clearly.

diff --git a/client-sdks/reference/flutter.mdx b/client-sdks/reference/flutter.mdx
@@ -10,6 +10,7 @@ import FlutterWatch from '/snippets/flutter/basic-watch-query.mdx';
 import GenerateSchemaAutomatically from '/snippets/generate-schema-automatically.mdx';
 import SdkClientSideSchema from '/snippets/sdk-client-side-schema.mdx';
 import LocalOnly from '/snippets/local-only-escape.mdx';
+import { PowerSyncCardGroup } from '/snippets/shared/powersync-card-group.jsx';
 import SubscribeSyncStreamsIntro from '/snippets/subscribe-sync-streams-intro.mdx';
 import SubscribeSyncStreamsOutro from '/snippets/subscribe-sync-streams-outro.mdx';
 import FlutterSubscribeSyncStream from '/snippets/flutter/subscribe-sync-stream.mdx';
@@ -18,7 +19,8 @@ import FlutterSubscribeSyncStream from '/snippets/flutter/subscribe-sync-stream.
 Install the PowerSync Agent Skills with: npx skills add powersync-ja/agent-skills. Then follow the skills to onboard this project to PowerSync using the Dart/Flutter SDK.
 ```
 
-<CardGroup cols={3}>
+
+<PowerSyncCardGroup>
   <Card title="PowerSync SDK on pub.dev" icon="cube" href="https://pub.dev/packages/powersync">
   The SDK is distributed via pub.dev
   </Card>
@@ -34,7 +36,7 @@ Install the PowerSync Agent Skills with: npx skills add powersync-ja/agent-skill
   <Card title="Changelog" icon="megaphone" href="https://releases.powersync.com/announcements/flutter-client-sdk">
   Changelog for the SDK
   </Card>
-</CardGroup>
+</PowerSyncCardGroup>
 
 ## Quickstart
 

diff --git a/client-sdks/reference/javascript-web.mdx b/client-sdks/reference/javascript-web.mdx
@@ -15,6 +15,7 @@ import SubscribeSyncStreamsOutro from '/snippets/subscribe-sync-streams-outro.md
 import JavaScriptSubscribeSyncStream from '/snippets/javascript/subscribe-sync-stream.mdx';
 import MutationConfirmationWithReturning from '/snippets/javascript-mutation-confirmation-returning.mdx';
 import LocalOnly from '/snippets/local-only-escape.mdx';
+import { PowerSyncCardGroup } from '/snippets/shared/powersync-card-group.jsx';
 
 The PowerSync JavaScript Web SDK runs SQLite in the browser and keeps it in sync with your backend database. Your UI reads and writes local data directly, so interactions feel instant because they do not wait on network round trips. Watch queries emit new results as local or synced data changes, keeping the UI current without polling.
 
@@ -24,7 +25,7 @@ With Sync Streams, you define the subset of backend data each client receives ra
 Install the PowerSync Agent Skills with: npx skills add powersync-ja/agent-skills. Then follow the skills to onboard this project to PowerSync using the JavaScript Web SDK.
 ```
 
-<CardGroup cols={3}>
+<PowerSyncCardGroup>
   <Card title="PowerSync SDK on NPM" icon="npm" href="https://www.npmjs.com/package/@powersync/web">
     This SDK is distributed via NPM
   </Card>
@@ -40,7 +41,7 @@ Install the PowerSync Agent Skills with: npx skills add powersync-ja/agent-skill
   <Card title="Changelog" icon="megaphone" href="https://releases.powersync.com/announcements/powersync-js-web-client-sdk">
     Changelog for the SDK
   </Card>
-</CardGroup>
+</PowerSyncCardGroup>
 
 ## SDK Features
 

diff --git a/client-sdks/reference/kotlin.mdx b/client-sdks/reference/kotlin.mdx
@@ -10,6 +10,7 @@ import KotlinWatch from '/snippets/kotlin/basic-watch-query.mdx';
 import GenerateSchemaAutomatically from '/snippets/generate-schema-automatically.mdx';
 import SdkClientSideSchema from '/snippets/sdk-client-side-schema.mdx';
 import LocalOnly from '/snippets/local-only-escape.mdx';
+import { PowerSyncCardGroup } from '/snippets/shared/powersync-card-group.jsx';
 import SubscribeSyncStreamsIntro from '/snippets/subscribe-sync-streams-intro.mdx';
 import SubscribeSyncStreamsOutro from '/snippets/subscribe-sync-streams-outro.mdx';
 import KotlinSubscribeSyncStream from '/snippets/kotlin/subscribe-sync-stream.mdx';
@@ -18,7 +19,7 @@ import KotlinSubscribeSyncStream from '/snippets/kotlin/subscribe-sync-stream.md
 Install the PowerSync Agent Skills with: npx skills add powersync-ja/agent-skills. Then follow the skills to onboard this project to PowerSync using the Kotlin Multiplatform SDK.
 ```
 
-<CardGroup cols={3}>
+<PowerSyncCardGroup>
   <Card title="PowerSync SDK on Maven Central" icon="/logo/maven.svg" href="https://central.sonatype.com/artifact/com.powersync/core">
   The PowerSync Kotlin SDK is distributed via Maven Central
   </Card>
@@ -34,7 +35,7 @@ Install the PowerSync Agent Skills with: npx skills add powersync-ja/agent-skill
   <Card title="Changelog" icon="megaphone" href="https://releases.powersync.com/announcements/powersync-kotlin-sdk">
   Changelog for the SDK
   </Card>
-</CardGroup>
+</PowerSyncCardGroup>
 
 ## SDK Features
 

diff --git a/client-sdks/reference/node.mdx b/client-sdks/reference/node.mdx
@@ -15,6 +15,7 @@ import SubscribeSyncStreamsIntro from '/snippets/subscribe-sync-streams-intro.md
 import SubscribeSyncStreamsOutro from '/snippets/subscribe-sync-streams-outro.mdx';
 import JavaScriptSubscribeSyncStream from '/snippets/javascript/subscribe-sync-stream.mdx';
 import LocalOnly from '/snippets/local-only-escape.mdx';
+import { PowerSyncCardGroup } from '/snippets/shared/powersync-card-group.jsx';
 
 <Note>
   This page describes the PowerSync _client_ SDK for Node.js.
@@ -26,7 +27,7 @@ import LocalOnly from '/snippets/local-only-escape.mdx';
 Install the PowerSync Agent Skills with: npx skills add powersync-ja/agent-skills. Then follow the skills to onboard this project to PowerSync using the Node.js client SDK.
 ```
 
-<CardGroup cols={3}>
+<PowerSyncCardGroup>
   <Card title="PowerSync SDK on NPM" icon="npm" href="https://www.npmjs.com/package/@powersync/node">
     This SDK is distributed via NPM
   </Card>
@@ -46,7 +47,7 @@ Install the PowerSync Agent Skills with: npx skills add powersync-ja/agent-skill
   <Card title="Changelog" icon="megaphone" href="https://releases.powersync.com/announcements/node-js-client-sdk">
     Changelog for the SDK
   </Card>
-</CardGroup>
+</PowerSyncCardGroup>
 
 ## SDK Features
 

diff --git a/client-sdks/reference/react-native-and-expo.mdx b/client-sdks/reference/react-native-and-expo.mdx
@@ -15,12 +15,13 @@ import SubscribeSyncStreamsIntro from '/snippets/subscribe-sync-streams-intro.md
 import SubscribeSyncStreamsOutro from '/snippets/subscribe-sync-streams-outro.mdx';
 import JavaScriptSubscribeSyncStream from '/snippets/javascript/subscribe-sync-stream.mdx';
 import LocalOnly from '/snippets/local-only-escape.mdx';
+import { PowerSyncCardGroup } from '/snippets/shared/powersync-card-group.jsx';
 
 ```text Build with AI icon="sparkles" wrap
 Install the PowerSync Agent Skills with: npx skills add powersync-ja/agent-skills. Then follow the skills to onboard this project to PowerSync using the React Native & Expo SDK.
 ```
 
-<CardGroup cols={3}>
+<PowerSyncCardGroup>
   <Card title="PowerSync SDK on NPM" icon="npm" href="https://www.npmjs.com/package/@powersync/react-native">
   This SDK is distributed via NPM
   </Card>
@@ -36,7 +37,7 @@ Full API reference for the SDK
   <Card title="Changelog" icon="megaphone" href="https://releases.powersync.com/announcements/react-native-client-sdk">
   Changelog for the SDK
   </Card>
-</CardGroup>
+</PowerSyncCardGroup>
 
 ## SDK Features
 

diff --git a/client-sdks/reference/rust.mdx b/client-sdks/reference/rust.mdx
@@ -10,6 +10,7 @@ import RustWatchQuery from '/snippets/rust/basic-watch-query.mdx';
 import GenerateSchemaAutomatically from '/snippets/generate-schema-automatically.mdx';
 import SdkClientSideSchema from '/snippets/sdk-client-side-schema.mdx';
 import LocalOnly from '/snippets/local-only-escape.mdx';
+import { PowerSyncCardGroup } from '/snippets/shared/powersync-card-group.jsx';
 import SubscribeSyncStreamsIntro from '/snippets/subscribe-sync-streams-intro.mdx';
 import SubscribeSyncStreamsOutro from '/snippets/subscribe-sync-streams-outro.mdx';
 import RustSubscribeSyncStream from '/snippets/rust/subscribe-sync-stream.mdx';
@@ -22,7 +23,7 @@ import RustSubscribeSyncStream from '/snippets/rust/subscribe-sync-stream.mdx';
 Install the PowerSync Agent Skills with: npx skills add powersync-ja/agent-skills. Then follow the skills to onboard this project to PowerSync using the Rust SDK.
 ```
 
-<CardGroup cols={3}>
+<PowerSyncCardGroup>
   <Card title="PowerSync SDK on crates.io" icon="cube" href="https://crates.io/crates/powersync">
   The SDK is distributed via crates.io
   </Card>
@@ -38,7 +39,7 @@ Install the PowerSync Agent Skills with: npx skills add powersync-ja/agent-skill
   <Card title="Changelog" icon="megaphone" href="https://github.com/powersync-ja/powersync-native/blob/main/CHANGELOG.md">
   Changelog for the SDK
   </Card>
-</CardGroup>
+</PowerSyncCardGroup>
 
 ## SDK Features
 

diff --git a/client-sdks/reference/swift.mdx b/client-sdks/reference/swift.mdx
@@ -10,6 +10,7 @@ import SwiftWatch from '/snippets/swift/basic-watch-query.mdx';
 import GenerateSchemaAutomatically from '/snippets/generate-schema-automatically.mdx';
 import SdkClientSideSchema from '/snippets/sdk-client-side-schema.mdx';
 import LocalOnly from '/snippets/local-only-escape.mdx';
+import { PowerSyncCardGroup } from '/snippets/shared/powersync-card-group.jsx';
 import SubscribeSyncStreamsIntro from '/snippets/subscribe-sync-streams-intro.mdx';
 import SubscribeSyncStreamsOutro from '/snippets/subscribe-sync-streams-outro.mdx';
 import SwiftSubscribeSyncStream from '/snippets/swift/subscribe-sync-stream.mdx';
@@ -18,7 +19,7 @@ import SwiftSubscribeSyncStream from '/snippets/swift/subscribe-sync-stream.mdx'
 Install the PowerSync Agent Skills with: npx skills add powersync-ja/agent-skills. Then follow the skills to onboard this project to PowerSync using the Swift SDK.
 ```
 
-<CardGroup cols={3}>
+<PowerSyncCardGroup>
   <Card title="Source Code" icon="github" href="https://github.com/powersync-ja/powersync-swift/">
   Refer to the `powersync-swift` repo on GitHub
   </Card>
@@ -31,7 +32,7 @@ Install the PowerSync Agent Skills with: npx skills add powersync-ja/agent-skill
   <Card title="Changelog" icon="megaphone" href="https://releases.powersync.com/announcements/powersync-swift-sdk">
   Changelog for the SDK
   </Card>
-</CardGroup>
+</PowerSyncCardGroup>
 
 <Note>
   Up to v1.13, the Swift SDK wrapped a PowerSync Kotlin XCFramework behind Swift protocols.

diff --git a/client-sdks/reference/tauri.mdx b/client-sdks/reference/tauri.mdx
@@ -11,6 +11,7 @@ import JavaScriptCallbackWatch from '/snippets/basic-watch-query-javascript-call
 import GenerateSchemaAutomatically from '/snippets/generate-schema-automatically.mdx';
 import SdkClientSideSchema from '/snippets/sdk-client-side-schema.mdx';
 import MutationConfirmationWithReturning from '/snippets/javascript-mutation-confirmation-returning.mdx';
+import { PowerSyncCardGroup } from '/snippets/shared/powersync-card-group.jsx';
 import SubscribeSyncStreamsIntro from '/snippets/subscribe-sync-streams-intro.mdx';
 import SubscribeSyncStreamsOutro from '/snippets/subscribe-sync-streams-outro.mdx';
 import JavaScriptSubscribeSyncStream from '/snippets/javascript/subscribe-sync-stream.mdx';
@@ -19,7 +20,7 @@ import JavaScriptSubscribeSyncStream from '/snippets/javascript/subscribe-sync-s
 Install the PowerSync Agent Skills with: npx skills add powersync-ja/agent-skills. Then follow the skills to onboard this project to PowerSync using the Tauri SDK.
 ```
 
-<CardGroup cols={3}>
+<PowerSyncCardGroup>
   <Card title="PowerSync SDK on NPM" icon="npm" href="https://www.npmjs.com/package/@powersync/tauri-plugin">
     The JavaScript part of the SDK is distributed via NPM
   </Card>
@@ -38,7 +39,7 @@ Install the PowerSync Agent Skills with: npx skills add powersync-ja/agent-skill
   <Card title="Changelog" icon="megaphone" href="https://github.com/powersync-ja/powersync-js/blob/main/packages/tauri/CHANGELOG.md">
     Changelog for the SDK
   </Card>
-</CardGroup>
+</PowerSyncCardGroup>
 
 <Warning>
   This SDK is currently in [**alpha**](/resources/feature-status), intended for external testing and public feedback. While it exposes the same stable JavaScript APIs as other PowerSync JavaScript SDKs, the underlying [Rust SDK](/client-sdks/reference/rust) and the IPC protocol between the JavaScript and Rust packages are subject to change. Expect breaking changes and instability as development continues.

diff --git a/configuration/app-backend/client-side-integration.mdx b/configuration/app-backend/client-side-integration.mdx
@@ -4,6 +4,8 @@ sidebarTitle: "Client-Side Integration"
 description: "Connect your client app to a PowerSync-compatible backend using the connector interface and upload queue."
 ---
 
+import { PowerSyncCardGroup } from '/snippets/shared/powersync-card-group.jsx';
+
 ## How PowerSync Uses Your Backend
 
 After you've [instantiated](/intro/setup-guide#instantiate-the-powersync-database) the client-side PowerSync database, you will call `connect()` on it, which causes the PowerSync Client SDK to connect to the [PowerSync Service](/architecture/powersync-service) for the purpose of syncing data to the client-side SQLite database, _and_ to connect to your backend application as needed, for two potential purposes:
@@ -164,7 +166,7 @@ The PowerSync sync token is used exclusively for the connection between the Clie
 
 For an example implementation of a PowerSync 'backend connector', see the SDK guide for your platform:
 
-<CardGroup cols={3}>
+<PowerSyncCardGroup>
   <Card title="Dart/Flutter" icon="flutter" href="/client-sdks/reference/flutter#3-integrate-with-your-backend" />
   <Card title="React Native & Expo" icon="react" href="/client-sdks/reference/react-native-and-expo#3-integrate-with-your-backend" />
   <Card title="JavaScript Web" icon="js" href="/client-sdks/reference/javascript-web#3-integrate-with-your-backend" />
@@ -175,7 +177,7 @@ For an example implementation of a PowerSync 'backend connector', see the SDK gu
   <Card title="Swift" icon="swift" href="/client-sdks/reference/swift#3-integrate-with-your-backend" />
   <Card title=".NET (beta)" icon="microsoft" href="/client-sdks/reference/dotnet#3-integrate-with-your-backend" />
   <Card title="Rust (alpha)" icon="rust" href="/client-sdks/reference/rust#3-integrate-with-your-backend" />
-</CardGroup>
+</PowerSyncCardGroup>
 
 ## More Examples
 

diff --git a/intro/powersync-overview.mdx b/intro/powersync-overview.mdx
@@ -5,6 +5,7 @@ sidebarTitle: Introduction
 ---
 
 import ClientSdks from '/snippets/client-sdks.mdx';
+import { PowerSyncCardGroup } from '/snippets/shared/powersync-card-group.jsx';
 
 PowerSync is made up of the PowerSync Service and a set of client SDKs. The PowerSync Service replicates data from your backend database, partitions it based on what data each user should receive, and streams real-time updates to clients through the PowerSync client SDK.
 
@@ -32,7 +33,9 @@ Install the PowerSync Agent Skills with: npx skills add powersync-ja/agent-skill
 
 PowerSync is also designed to be client-side stack agnostic, and currently has client SDKs available for:
 
+<PowerSyncCardGroup>
 <ClientSdks />
+</PowerSyncCardGroup>
 
 <Note>
   Looking for an SDK that's not listed above? Upvote it or submit it on [our roadmap](https://roadmap.powersync.com/).
@@ -42,7 +45,7 @@ PowerSync is also designed to be client-side stack agnostic, and currently has c
 
 PowerSync is designed to be backend database agnostic, and supports these source databases:
 
-<CardGroup cols={4}>
+<PowerSyncCardGroup>
   <Card title="Postgres" icon="elephant" href="/configuration/source-db/setup#postgres" />
 
   <Card title="MongoDB" icon="leaf" href="/configuration/source-db/setup#mongodb" />
@@ -54,7 +57,7 @@ PowerSync is designed to be backend database agnostic, and supports these source
   <Card title="Azure DocumentDB (Alpha)" icon="microsoft" href="/configuration/source-db/setup#azure-documentdb" />
 
   <Card title="Convex (Experimental)" icon="database" href="/configuration/source-db/setup#convex" />
-</CardGroup>
+</PowerSyncCardGroup>
 
 ## Need Help?