TanStack · KyleAMathews · Jul 14, 2025 · Jul 10, 2025 · Jul 10, 2025 · Jul 10, 2025
diff --git a/.changeset/chubby-turkeys-sell.md b/.changeset/chubby-turkeys-sell.md
@@ -0,0 +1,25 @@
+---
+"@tanstack/db-electric-collection": patch
+"@tanstack/db-query-collection": patch
+"@tanstack/db-example-react-todo": patch
+"@tanstack/db": patch
+---
+
+Move Collections to their own packages
+
+- Move local-only and local-storage collections to main `@tanstack/db` package
+- Create new `@tanstack/db-electric-collection` package for Electric SQL integration
+- Create new `@tanstack/db-query-collection` package for TanStack Query integration
+- Delete `@tanstack/db-collections` package (removed from repo)
+- Update example app and documentation to use new package structure
+
+**New structure:**
+
+- `@tanstack/db` - now includes local-only & local-storage collections
+- `@tanstack/db-electric-collection` - Electric SQL integration (v0.0.1)
+- `@tanstack/db-query-collection` - TanStack Query integration (v0.0.1)
+- `@tanstack/db-collections` - ❌ deleted from repo
+
+- Better separation of concerns
+- Independent versioning for each collection type
+- Cleaner dependencies (electric collections don't need query deps, etc.)
diff --git a/README.md b/README.md
@@ -48,14 +48,18 @@ TanStack DB is **backend agnostic** and **incrementally adoptable**:
 Sync data into collections:
 
 ```ts
-import { createQueryCollection } from "@tanstack/db-collections"
-
-const todoCollection = createQueryCollection({
-  queryKey: ["todos"],
-  queryFn: async () => fetch("/api/todos"),
-  getKey: (item) => item.id,
-  schema: todoSchema, // any standard schema
-})
+import { createCollection, QueryClient } from "@tanstack/react-db"
+import { queryCollectionOptions } from "@tanstack/db-query-collection"
+
+const todoCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: ["todos"],
+    queryFn: async () => fetch("/api/todos"),
+    queryClient: new QueryClient(),
+    getKey: (item) => item.id,
+    schema: todoSchema, // any standard schema
+  })
+)
 ```
 
 Use live queries in your components:
@@ -135,7 +139,9 @@ There's also an example [React todo app](./examples/react/todo) and usage exampl
 ## 🔧 Install
 
 ```bash
-npm install @tanstack/react-db @tanstack/db-collections
+npm install @tanstack/react-db
+# Optional: for specific collection types
+npm install @tanstack/db-electric-collection @tanstack/db-query-collection
 ```
 
 Other framework integrations are in progress.

diff --git a/examples/react/todo/src/App.tsx b/examples/react/todo/src/App.tsx
@@ -1,9 +1,7 @@
 import React, { useState } from "react"
 import { createCollection, useLiveQuery } from "@tanstack/react-db"
-import {
-  electricCollectionOptions,
-  queryCollectionOptions,
-} from "@tanstack/db-collections"
+import { electricCollectionOptions } from "@tanstack/db-electric-collection"
+import { queryCollectionOptions } from "@tanstack/db-query-collection"
 // import { DevTools } from "./DevTools"
 import { QueryClient } from "@tanstack/query-core"
 import { selectConfigSchema, selectTodoSchema } from "./db/validation"

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/db-monorepo",
   "private": true,
-  "description": "Optimistic UI library for sync engines",
+  "description": "Reactive client queryable store for sync-first applications",
   "version": "0.0.0",
   "repository": {
     "type": "git",

diff --git a/packages/db-collections/CHANGELOG.md b/packages/db-collections/CHANGELOG.md
diff --git a/packages/db-collections/README.md b/packages/db-collections/README.md
diff --git a/packages/db-collections/src/index.ts b/packages/db-collections/src/index.ts
diff --git a/packages/db-collections/tests/test-setup.ts b/packages/db-collections/tests/test-setup.ts
diff --git a/packages/db-collections/package.json → packages/db-electric-collection/package.json b/packages/db-collections/package.json → packages/db-electric-collection/package.json
@@ -1,16 +1,15 @@
 {
-  "name": "@tanstack/db-collections",
-  "description": "A collection for (aspirationally) every way of loading your data",
-  "version": "0.0.23",
+  "name": "@tanstack/db-electric-collection",
+  "description": "Electric SQL collection for TanStack DB",
+  "version": "0.0.1",
   "dependencies": {
+    "@electric-sql/client": "1.0.0",
     "@standard-schema/spec": "^1.0.0",
     "@tanstack/db": "workspace:*",
-    "@tanstack/query-core": "^5.75.7",
     "@tanstack/store": "^0.7.0",
     "debug": "^4.4.1"
   },
   "devDependencies": {
-    "@electric-sql/client": "1.0.0",
     "@types/debug": "^4.1.12",
     "@vitest/coverage-istanbul": "^3.0.9"
   },
@@ -43,10 +42,12 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/TanStack/db.git",
-    "directory": "packages/db-collections"
+    "directory": "packages/db-electric-collection"
   },
   "homepage": "https://tanstack.com/db",
   "keywords": [
+    "electric",
+    "sql",
     "optimistic",
     "typescript"
   ],

diff --git a/packages/db-collections/src/electric.ts → ...es/db-electric-collection/src/electric.ts b/packages/db-collections/src/electric.ts → ...es/db-electric-collection/src/electric.ts
diff --git a/packages/db-electric-collection/src/index.ts b/packages/db-electric-collection/src/index.ts
@@ -0,0 +1,6 @@
+export {
+  electricCollectionOptions,
+  type ElectricCollectionConfig,
+  type ElectricCollectionUtils,
+  type Txid,
+} from "./electric"
diff --git a/...s/db-collections/tests/electric.test-d.ts → ...ctric-collection/tests/electric.test-d.ts b/...s/db-collections/tests/electric.test-d.ts → ...ctric-collection/tests/electric.test-d.ts
diff --git a/...ges/db-collections/tests/electric.test.ts → ...lectric-collection/tests/electric.test.ts b/...ges/db-collections/tests/electric.test.ts → ...lectric-collection/tests/electric.test.ts
diff --git a/packages/db-collections/tsconfig.json → ...ages/db-electric-collection/tsconfig.json b/packages/db-collections/tsconfig.json → ...ages/db-electric-collection/tsconfig.json