From c7a79272c1d64c3155eab961156d742d4c5b069e Mon Sep 17 00:00:00 2001
From: marknesh <markmunene.nesh@gmail.com>
Date: Tue, 8 Sep 2026 22:23:10 +0300
Subject: [PATCH 1/3] Refactor client SDK documentation to use
 PowerSyncCardGroup component

---
 client-sdks/overview.mdx                              | 5 +++--
 client-sdks/reference/capacitor.mdx                   | 5 +++--
 client-sdks/reference/dotnet.mdx                      | 5 +++--
 client-sdks/reference/flutter.mdx                     | 6 ++++--
 client-sdks/reference/javascript-web.mdx              | 5 +++--
 client-sdks/reference/kotlin.mdx                      | 5 +++--
 client-sdks/reference/node.mdx                        | 5 +++--
 client-sdks/reference/react-native-and-expo.mdx       | 5 +++--
 client-sdks/reference/rust.mdx                        | 5 +++--
 client-sdks/reference/swift.mdx                       | 5 +++--
 client-sdks/reference/tauri.mdx                       | 5 +++--
 configuration/app-backend/client-side-integration.mdx | 6 ++++--
 shared/components/powersync-card-group.jsx            | 7 +++++++
 snippets/client-sdks.mdx                              | 6 ++++--
 tools/cli.mdx                                         | 6 ++++--
 15 files changed, 53 insertions(+), 28 deletions(-)
 create mode 100644 shared/components/powersync-card-group.jsx

diff --git a/client-sdks/overview.mdx b/client-sdks/overview.mdx
index 9d787f5f6..179eed2da 100644
--- 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 '/shared/components/powersync-card-group.jsx';
 
 PowerSync provides client SDKs for multiple frameworks. Each SDK manages a local SQLite database that syncs with your backend.
 
@@ -35,7 +36,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>
@@ -45,5 +46,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
index 93ecaa19c..0b5286c41 100644
--- a/client-sdks/reference/capacitor.mdx
+++ b/client-sdks/reference/capacitor.mdx
@@ -11,12 +11,13 @@ import JavaScriptCallbackWatch from '/snippets/basic-watch-query-javascript-call
 import GenerateSchemaAutomatically from '/snippets/generate-schema-automatically.mdx';
 import MutationConfirmationWithReturning from '/snippets/javascript-mutation-confirmation-returning.mdx';
 import LocalOnly from '/snippets/local-only-escape.mdx';
+import { PowerSyncCardGroup } from '/shared/components/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>
@@ -32,7 +33,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
index dce36c93b..4498df886 100644
--- a/client-sdks/reference/dotnet.mdx
+++ b/client-sdks/reference/dotnet.mdx
@@ -9,12 +9,13 @@ import DotNetInstallation from '/snippets/dotnet/installation.mdx';
 import DotNetWatch from '/snippets/dotnet/basic-watch-query.mdx';
 import GenerateSchemaAutomatically from '/snippets/generate-schema-automatically.mdx';
 import LocalOnly from '/snippets/local-only-escape.mdx';
+import { PowerSyncCardGroup } from '/shared/components/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 .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>
@@ -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-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 breaking changes will be communicated clearly.
diff --git a/client-sdks/reference/flutter.mdx b/client-sdks/reference/flutter.mdx
index bd6c6aa1a..1e973d568 100644
--- a/client-sdks/reference/flutter.mdx
+++ b/client-sdks/reference/flutter.mdx
@@ -9,12 +9,14 @@ import FlutterInstallation from '/snippets/flutter/installation.mdx';
 import FlutterWatch from '/snippets/flutter/basic-watch-query.mdx';
 import GenerateSchemaAutomatically from '/snippets/generate-schema-automatically.mdx';
 import LocalOnly from '/snippets/local-only-escape.mdx';
+import { PowerSyncCardGroup } from '/shared/components/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 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>
@@ -30,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/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
index c79770ba2..a8cece7f1 100644
--- a/client-sdks/reference/javascript-web.mdx
+++ b/client-sdks/reference/javascript-web.mdx
@@ -11,12 +11,13 @@ import JavaScriptCallbackWatch from '/snippets/basic-watch-query-javascript-call
 import GenerateSchemaAutomatically from '/snippets/generate-schema-automatically.mdx';
 import MutationConfirmationWithReturning from '/snippets/javascript-mutation-confirmation-returning.mdx';
 import LocalOnly from '/snippets/local-only-escape.mdx';
+import { PowerSyncCardGroup } from '/shared/components/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 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>
@@ -32,7 +33,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>
 
 ### Quickstart
 <iframe
diff --git a/client-sdks/reference/kotlin.mdx b/client-sdks/reference/kotlin.mdx
index 147559d45..fd46ffdab 100644
--- a/client-sdks/reference/kotlin.mdx
+++ b/client-sdks/reference/kotlin.mdx
@@ -9,12 +9,13 @@ import KotlinInstallation from '/snippets/kotlin/installation.mdx';
 import KotlinWatch from '/snippets/kotlin/basic-watch-query.mdx';
 import GenerateSchemaAutomatically from '/snippets/generate-schema-automatically.mdx';
 import LocalOnly from '/snippets/local-only-escape.mdx';
+import { PowerSyncCardGroup } from '/shared/components/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 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>
@@ -30,7 +31,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
index 8ac1121e7..d9cb70776 100644
--- a/client-sdks/reference/node.mdx
+++ b/client-sdks/reference/node.mdx
@@ -11,6 +11,7 @@ import JavaScriptCallbackWatch from '/snippets/basic-watch-query-javascript-call
 import GenerateSchemaAutomatically from '/snippets/generate-schema-automatically.mdx';
 import MutationConfirmationWithReturning from '/snippets/javascript-mutation-confirmation-returning.mdx';
 import LocalOnly from '/snippets/local-only-escape.mdx';
+import { PowerSyncCardGroup } from '/shared/components/powersync-card-group.jsx';
 
 <Note>
   This page describes the PowerSync _client_ SDK for Node.js.
@@ -22,7 +23,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>
@@ -42,7 +43,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
index 93194c50a..334f2516a 100644
--- a/client-sdks/reference/react-native-and-expo.mdx
+++ b/client-sdks/reference/react-native-and-expo.mdx
@@ -11,12 +11,13 @@ import JavaScriptCallbackWatch from '/snippets/basic-watch-query-javascript-call
 import GenerateSchemaAutomatically from '/snippets/generate-schema-automatically.mdx';
 import MutationConfirmationWithReturning from '/snippets/javascript-mutation-confirmation-returning.mdx';
 import LocalOnly from '/snippets/local-only-escape.mdx';
+import { PowerSyncCardGroup } from '/shared/components/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>
@@ -32,7 +33,7 @@ Full API reference for the PowerSync 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
index 9273bc238..192c724a9 100644
--- a/client-sdks/reference/rust.mdx
+++ b/client-sdks/reference/rust.mdx
@@ -9,6 +9,7 @@ import RustInstallation from '/snippets/rust/installation.mdx';
 import RustWatchQuery from '/snippets/rust/basic-watch-query.mdx';
 import GenerateSchemaAutomatically from '/snippets/generate-schema-automatically.mdx';
 import LocalOnly from '/snippets/local-only-escape.mdx';
+import { PowerSyncCardGroup } from '/shared/components/powersync-card-group.jsx';
 
 <Warning>
   This SDK is currently in [**alpha**](/resources/feature-status), intended for external testing and public feedback. Expect breaking changes and instability as development continues.
@@ -18,7 +19,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 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>
@@ -34,7 +35,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
index d67c19cce..9b484d655 100644
--- a/client-sdks/reference/swift.mdx
+++ b/client-sdks/reference/swift.mdx
@@ -9,12 +9,13 @@ import SwiftInstallation from '/snippets/swift/installation.mdx';
 import SwiftWatch from '/snippets/swift/basic-watch-query.mdx';
 import GenerateSchemaAutomatically from '/snippets/generate-schema-automatically.mdx';
 import LocalOnly from '/snippets/local-only-escape.mdx';
+import { PowerSyncCardGroup } from '/shared/components/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 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>
@@ -27,7 +28,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>
   Earlier versions of the Swift SDK (up to v1.13) shipped a PowerSync Kotlin XCFramework under the hood and abstracted it behind Swift protocols.
diff --git a/client-sdks/reference/tauri.mdx b/client-sdks/reference/tauri.mdx
index 96ce9d42d..0989eb4c3 100644
--- a/client-sdks/reference/tauri.mdx
+++ b/client-sdks/reference/tauri.mdx
@@ -10,12 +10,13 @@ import JavaScriptAsyncWatch from '/snippets/basic-watch-query-javascript-async.m
 import JavaScriptCallbackWatch from '/snippets/basic-watch-query-javascript-callback.mdx';
 import GenerateSchemaAutomatically from '/snippets/generate-schema-automatically.mdx';
 import MutationConfirmationWithReturning from '/snippets/javascript-mutation-confirmation-returning.mdx';
+import { PowerSyncCardGroup } from '/shared/components/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 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>
@@ -34,7 +35,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
index 8768f56b6..2ecdc3957 100644
--- 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 '/shared/components/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/shared/components/powersync-card-group.jsx b/shared/components/powersync-card-group.jsx
new file mode 100644
index 000000000..d63f220da
--- /dev/null
+++ b/shared/components/powersync-card-group.jsx
@@ -0,0 +1,7 @@
+export function PowerSyncCardGroup({ children }) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-x-4">
+      {children}
+    </div>
+  )
+}
diff --git a/snippets/client-sdks.mdx b/snippets/client-sdks.mdx
index b9214a850..796f2f463 100644
--- a/snippets/client-sdks.mdx
+++ b/snippets/client-sdks.mdx
@@ -1,4 +1,6 @@
-<CardGroup cols={3}>
+import { PowerSyncCardGroup } from '/shared/components/powersync-card-group.jsx';
+
+<PowerSyncCardGroup>
   <Card title="Dart/Flutter" icon="flutter" href="/client-sdks/reference/flutter" horizontal />
 
   <Card title="React Native & Expo" icon="react" href="/client-sdks/reference/react-native-and-expo" horizontal />
@@ -18,4 +20,4 @@
   <Card title=".NET (beta)" icon="microsoft" href="/client-sdks/reference/dotnet" horizontal />
 
   <Card title="Rust (alpha)" icon="rust" href="/client-sdks/reference/rust" horizontal />
-</CardGroup>
+</PowerSyncCardGroup>
diff --git a/tools/cli.mdx b/tools/cli.mdx
index 50b3926a7..0ea959e6e 100644
--- a/tools/cli.mdx
+++ b/tools/cli.mdx
@@ -3,7 +3,9 @@ title: "CLI"
 description: "Manage PowerSync Cloud and self-hosted instances from the command line."
 ---
 
-<CardGroup cols={3}>
+import { PowerSyncCardGroup } from '/shared/components/powersync-card-group.jsx';
+
+<PowerSyncCardGroup>
   <Card
     title="PowerSync CLI on NPM"
     icon="npm"
@@ -25,7 +27,7 @@ description: "Manage PowerSync Cloud and self-hosted instances from the command
   >
     Changelog for the CLI
   </Card>
-</CardGroup>
+</PowerSyncCardGroup>
 
 The PowerSync CLI lets you manage PowerSync Service instances, deploy Sync Config (your Sync Streams or Sync Rules), generate client schemas, run diagnostics, and more. It is distributed as the [powersync](https://www.npmjs.com/package/powersync) npm package.
 

From ad2c613ea544149d1cc069d5debb630a0afb634d Mon Sep 17 00:00:00 2001
From: marknesh <markmunene.nesh@gmail.com>
Date: Tue, 8 Sep 2026 22:42:42 +0300
Subject: [PATCH 2/3] Update PowerSync overview to utilize PowerSyncCardGroup
 component

---
 intro/powersync-overview.mdx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/intro/powersync-overview.mdx b/intro/powersync-overview.mdx
index a2dcf3d3b..8ae21ebf1 100644
--- 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 '/shared/components/powersync-card-group.jsx';
 
 Your app reads and writes directly to its local database, so user interactions feel instant and your app continues to work even when offline. PowerSync syncs changes to and from your local database, so updates appear across users and devices in real-time.
 
@@ -34,7 +35,7 @@ Install the PowerSync Agent Skills with: npx skills add powersync-ja/agent-skill
 
 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" />
@@ -46,7 +47,7 @@ PowerSync is designed to be backend database agnostic, and supports these source
   <Card title="Azure DocumentDB (Experimental)" icon="microsoft" href="/configuration/source-db/setup#azure-documentdb" />
 
   <Card title="Convex (Experimental)" icon="database" href="/configuration/source-db/setup#convex" />
-</CardGroup>
+</PowerSyncCardGroup>
 
 ## Supported Client SDKs
 

From 4225cb9e0925a42b827edf4a727471916de700f4 Mon Sep 17 00:00:00 2001
From: marknesh <markmunene.nesh@gmail.com>
Date: Wed, 9 Sep 2026 10:52:08 +0300
Subject: [PATCH 3/3] Move PowerSyncCardGroup to snippets folder

---
 client-sdks/overview.mdx                      |  6 +++--
 client-sdks/reference/capacitor.mdx           |  2 +-
 client-sdks/reference/dotnet.mdx              |  2 +-
 client-sdks/reference/flutter.mdx             |  2 +-
 client-sdks/reference/javascript-web.mdx      |  2 +-
 client-sdks/reference/kotlin.mdx              |  2 +-
 client-sdks/reference/node.mdx                |  2 +-
 .../reference/react-native-and-expo.mdx       |  2 +-
 client-sdks/reference/rust.mdx                |  2 +-
 client-sdks/reference/swift.mdx               |  2 +-
 client-sdks/reference/tauri.mdx               |  2 +-
 .../app-backend/client-side-integration.mdx   |  2 +-
 intro/powersync-overview.mdx                  |  6 +++--
 snippets/client-sdks.mdx                      | 24 ++++++++-----------
 .../shared}/powersync-card-group.jsx          |  2 +-
 tools/cli.mdx                                 |  2 +-
 16 files changed, 31 insertions(+), 31 deletions(-)
 rename {shared/components => snippets/shared}/powersync-card-group.jsx (69%)

diff --git a/client-sdks/overview.mdx b/client-sdks/overview.mdx
index 179eed2da..18603cb5b 100644
--- a/client-sdks/overview.mdx
+++ b/client-sdks/overview.mdx
@@ -5,7 +5,7 @@ sidebarTitle: "Overview"
 ---
 
 import ClientSdks from '/snippets/client-sdks.mdx';
-import { PowerSyncCardGroup } from '/shared/components/powersync-card-group.jsx';
+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.
 
@@ -13,7 +13,9 @@ PowerSync provides client SDKs for multiple frameworks. Each SDK manages a local
 
 Select your client framework to get started:
 
-<ClientSdks />
+<PowerSyncCardGroup>
+  <ClientSdks />
+</PowerSyncCardGroup>
 
 ## Common Tasks
 
diff --git a/client-sdks/reference/capacitor.mdx b/client-sdks/reference/capacitor.mdx
index 0b5286c41..619dac582 100644
--- a/client-sdks/reference/capacitor.mdx
+++ b/client-sdks/reference/capacitor.mdx
@@ -11,7 +11,7 @@ import JavaScriptCallbackWatch from '/snippets/basic-watch-query-javascript-call
 import GenerateSchemaAutomatically from '/snippets/generate-schema-automatically.mdx';
 import MutationConfirmationWithReturning from '/snippets/javascript-mutation-confirmation-returning.mdx';
 import LocalOnly from '/snippets/local-only-escape.mdx';
-import { PowerSyncCardGroup } from '/shared/components/powersync-card-group.jsx';
+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.
diff --git a/client-sdks/reference/dotnet.mdx b/client-sdks/reference/dotnet.mdx
index 4498df886..c2d8fb2e5 100644
--- a/client-sdks/reference/dotnet.mdx
+++ b/client-sdks/reference/dotnet.mdx
@@ -9,7 +9,7 @@ import DotNetInstallation from '/snippets/dotnet/installation.mdx';
 import DotNetWatch from '/snippets/dotnet/basic-watch-query.mdx';
 import GenerateSchemaAutomatically from '/snippets/generate-schema-automatically.mdx';
 import LocalOnly from '/snippets/local-only-escape.mdx';
-import { PowerSyncCardGroup } from '/shared/components/powersync-card-group.jsx';
+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 .NET SDK.
diff --git a/client-sdks/reference/flutter.mdx b/client-sdks/reference/flutter.mdx
index 1e973d568..fbd18b1e0 100644
--- a/client-sdks/reference/flutter.mdx
+++ b/client-sdks/reference/flutter.mdx
@@ -9,7 +9,7 @@ import FlutterInstallation from '/snippets/flutter/installation.mdx';
 import FlutterWatch from '/snippets/flutter/basic-watch-query.mdx';
 import GenerateSchemaAutomatically from '/snippets/generate-schema-automatically.mdx';
 import LocalOnly from '/snippets/local-only-escape.mdx';
-import { PowerSyncCardGroup } from '/shared/components/powersync-card-group.jsx';
+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 Dart/Flutter SDK.
diff --git a/client-sdks/reference/javascript-web.mdx b/client-sdks/reference/javascript-web.mdx
index a8cece7f1..3f2a74510 100644
--- a/client-sdks/reference/javascript-web.mdx
+++ b/client-sdks/reference/javascript-web.mdx
@@ -11,7 +11,7 @@ import JavaScriptCallbackWatch from '/snippets/basic-watch-query-javascript-call
 import GenerateSchemaAutomatically from '/snippets/generate-schema-automatically.mdx';
 import MutationConfirmationWithReturning from '/snippets/javascript-mutation-confirmation-returning.mdx';
 import LocalOnly from '/snippets/local-only-escape.mdx';
-import { PowerSyncCardGroup } from '/shared/components/powersync-card-group.jsx';
+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 JavaScript Web SDK.
diff --git a/client-sdks/reference/kotlin.mdx b/client-sdks/reference/kotlin.mdx
index fd46ffdab..0f5da8842 100644
--- a/client-sdks/reference/kotlin.mdx
+++ b/client-sdks/reference/kotlin.mdx
@@ -9,7 +9,7 @@ import KotlinInstallation from '/snippets/kotlin/installation.mdx';
 import KotlinWatch from '/snippets/kotlin/basic-watch-query.mdx';
 import GenerateSchemaAutomatically from '/snippets/generate-schema-automatically.mdx';
 import LocalOnly from '/snippets/local-only-escape.mdx';
-import { PowerSyncCardGroup } from '/shared/components/powersync-card-group.jsx';
+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 Kotlin Multiplatform SDK.
diff --git a/client-sdks/reference/node.mdx b/client-sdks/reference/node.mdx
index d9cb70776..8fb798b4e 100644
--- a/client-sdks/reference/node.mdx
+++ b/client-sdks/reference/node.mdx
@@ -11,7 +11,7 @@ import JavaScriptCallbackWatch from '/snippets/basic-watch-query-javascript-call
 import GenerateSchemaAutomatically from '/snippets/generate-schema-automatically.mdx';
 import MutationConfirmationWithReturning from '/snippets/javascript-mutation-confirmation-returning.mdx';
 import LocalOnly from '/snippets/local-only-escape.mdx';
-import { PowerSyncCardGroup } from '/shared/components/powersync-card-group.jsx';
+import { PowerSyncCardGroup } from '/snippets/shared/powersync-card-group.jsx';
 
 <Note>
   This page describes the PowerSync _client_ SDK for Node.js.
diff --git a/client-sdks/reference/react-native-and-expo.mdx b/client-sdks/reference/react-native-and-expo.mdx
index 334f2516a..300ad07f7 100644
--- a/client-sdks/reference/react-native-and-expo.mdx
+++ b/client-sdks/reference/react-native-and-expo.mdx
@@ -11,7 +11,7 @@ import JavaScriptCallbackWatch from '/snippets/basic-watch-query-javascript-call
 import GenerateSchemaAutomatically from '/snippets/generate-schema-automatically.mdx';
 import MutationConfirmationWithReturning from '/snippets/javascript-mutation-confirmation-returning.mdx';
 import LocalOnly from '/snippets/local-only-escape.mdx';
-import { PowerSyncCardGroup } from '/shared/components/powersync-card-group.jsx';
+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.
diff --git a/client-sdks/reference/rust.mdx b/client-sdks/reference/rust.mdx
index 192c724a9..a4e9cfea7 100644
--- a/client-sdks/reference/rust.mdx
+++ b/client-sdks/reference/rust.mdx
@@ -9,7 +9,7 @@ import RustInstallation from '/snippets/rust/installation.mdx';
 import RustWatchQuery from '/snippets/rust/basic-watch-query.mdx';
 import GenerateSchemaAutomatically from '/snippets/generate-schema-automatically.mdx';
 import LocalOnly from '/snippets/local-only-escape.mdx';
-import { PowerSyncCardGroup } from '/shared/components/powersync-card-group.jsx';
+import { PowerSyncCardGroup } from '/snippets/shared/powersync-card-group.jsx';
 
 <Warning>
   This SDK is currently in [**alpha**](/resources/feature-status), intended for external testing and public feedback. Expect breaking changes and instability as development continues.
diff --git a/client-sdks/reference/swift.mdx b/client-sdks/reference/swift.mdx
index 9b484d655..e011aa818 100644
--- a/client-sdks/reference/swift.mdx
+++ b/client-sdks/reference/swift.mdx
@@ -9,7 +9,7 @@ import SwiftInstallation from '/snippets/swift/installation.mdx';
 import SwiftWatch from '/snippets/swift/basic-watch-query.mdx';
 import GenerateSchemaAutomatically from '/snippets/generate-schema-automatically.mdx';
 import LocalOnly from '/snippets/local-only-escape.mdx';
-import { PowerSyncCardGroup } from '/shared/components/powersync-card-group.jsx';
+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 Swift SDK.
diff --git a/client-sdks/reference/tauri.mdx b/client-sdks/reference/tauri.mdx
index 0989eb4c3..6cb63dc38 100644
--- a/client-sdks/reference/tauri.mdx
+++ b/client-sdks/reference/tauri.mdx
@@ -10,7 +10,7 @@ import JavaScriptAsyncWatch from '/snippets/basic-watch-query-javascript-async.m
 import JavaScriptCallbackWatch from '/snippets/basic-watch-query-javascript-callback.mdx';
 import GenerateSchemaAutomatically from '/snippets/generate-schema-automatically.mdx';
 import MutationConfirmationWithReturning from '/snippets/javascript-mutation-confirmation-returning.mdx';
-import { PowerSyncCardGroup } from '/shared/components/powersync-card-group.jsx';
+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 Tauri SDK.
diff --git a/configuration/app-backend/client-side-integration.mdx b/configuration/app-backend/client-side-integration.mdx
index 2ecdc3957..2618e0784 100644
--- a/configuration/app-backend/client-side-integration.mdx
+++ b/configuration/app-backend/client-side-integration.mdx
@@ -4,7 +4,7 @@ sidebarTitle: "Client-Side Integration"
 description: "Connect your client app to a PowerSync-compatible backend using the connector interface and upload queue."
 ---
 
-import { PowerSyncCardGroup } from '/shared/components/powersync-card-group.jsx';
+import { PowerSyncCardGroup } from '/snippets/shared/powersync-card-group.jsx';
 
 ## How PowerSync Uses Your Backend
 
diff --git a/intro/powersync-overview.mdx b/intro/powersync-overview.mdx
index 8ae21ebf1..d2db1d60e 100644
--- a/intro/powersync-overview.mdx
+++ b/intro/powersync-overview.mdx
@@ -5,7 +5,7 @@ sidebarTitle: Introduction
 ---
 
 import ClientSdks from '/snippets/client-sdks.mdx';
-import { PowerSyncCardGroup } from '/shared/components/powersync-card-group.jsx';
+import { PowerSyncCardGroup } from '/snippets/shared/powersync-card-group.jsx';
 
 Your app reads and writes directly to its local database, so user interactions feel instant and your app continues to work even when offline. PowerSync syncs changes to and from your local database, so updates appear across users and devices in real-time.
 
@@ -53,7 +53,9 @@ PowerSync is designed to be backend database agnostic, and supports these source
 
 PowerSync is also designed to be client-side stack agnostic, and currently has client SDKs available for:
 
-<ClientSdks />
+<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/).
diff --git a/snippets/client-sdks.mdx b/snippets/client-sdks.mdx
index 796f2f463..7e49e1b78 100644
--- a/snippets/client-sdks.mdx
+++ b/snippets/client-sdks.mdx
@@ -1,23 +1,19 @@
-import { PowerSyncCardGroup } from '/shared/components/powersync-card-group.jsx';
+<Card title="Dart/Flutter" icon="flutter" href="/client-sdks/reference/flutter" horizontal />
 
-<PowerSyncCardGroup>
-  <Card title="Dart/Flutter" icon="flutter" href="/client-sdks/reference/flutter" horizontal />
+<Card title="React Native & Expo" icon="react" href="/client-sdks/reference/react-native-and-expo" horizontal />
 
-  <Card title="React Native & Expo" icon="react" href="/client-sdks/reference/react-native-and-expo" horizontal />
+<Card title="JavaScript Web" icon="js" href="/client-sdks/reference/javascript-web" horizontal />
 
-  <Card title="JavaScript Web" icon="js" href="/client-sdks/reference/javascript-web" horizontal />
+<Card title="Capacitor (beta)" icon="c" href="/client-sdks/reference/capacitor" horizontal />
 
-  <Card title="Capacitor (beta)" icon="c" href="/client-sdks/reference/capacitor" horizontal />
+<Card title="Tauri (alpha)" icon="/logo/tauri_sidebar.svg" href="/client-sdks/reference/tauri" horizontal />
 
-  <Card title="Tauri (alpha)" icon="/logo/tauri_sidebar.svg" href="/client-sdks/reference/tauri" horizontal />
+<Card title="Node.js" icon="node-js" href="/client-sdks/reference/node" horizontal />
 
-  <Card title="Node.js" icon="node-js" href="/client-sdks/reference/node" horizontal />
+<Card title="Kotlin" icon="android" href="/client-sdks/reference/kotlin" horizontal />
 
-  <Card title="Kotlin" icon="android" href="/client-sdks/reference/kotlin" horizontal />
+<Card title="Swift" icon="swift" href="/client-sdks/reference/swift" horizontal />
 
-  <Card title="Swift" icon="swift" href="/client-sdks/reference/swift" horizontal />
+<Card title=".NET (beta)" icon="microsoft" href="/client-sdks/reference/dotnet" horizontal />
 
-  <Card title=".NET (beta)" icon="microsoft" href="/client-sdks/reference/dotnet" horizontal />
-
-  <Card title="Rust (alpha)" icon="rust" href="/client-sdks/reference/rust" horizontal />
-</PowerSyncCardGroup>
+<Card title="Rust (alpha)" icon="rust" href="/client-sdks/reference/rust" horizontal />
diff --git a/shared/components/powersync-card-group.jsx b/snippets/shared/powersync-card-group.jsx
similarity index 69%
rename from shared/components/powersync-card-group.jsx
rename to snippets/shared/powersync-card-group.jsx
index d63f220da..5b51e5263 100644
--- a/shared/components/powersync-card-group.jsx
+++ b/snippets/shared/powersync-card-group.jsx
@@ -1,4 +1,4 @@
-export function PowerSyncCardGroup({ children }) {
+export const PowerSyncCardGroup = ({ children }) => {
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-x-4">
       {children}
diff --git a/tools/cli.mdx b/tools/cli.mdx
index 0ea959e6e..a8c89cf80 100644
--- a/tools/cli.mdx
+++ b/tools/cli.mdx
@@ -3,7 +3,7 @@ title: "CLI"
 description: "Manage PowerSync Cloud and self-hosted instances from the command line."
 ---
 
-import { PowerSyncCardGroup } from '/shared/components/powersync-card-group.jsx';
+import { PowerSyncCardGroup } from '/snippets/shared/powersync-card-group.jsx';
 
 <PowerSyncCardGroup>
   <Card