Installation

Each supported framework comes with its own package. Each framework package re-exports everything from the core @tanstack/db package.

React

npm install @tanstack/react-db

TanStack DB is compatible with React v18+

Solid

npm install @tanstack/solid-db

Svelte

npm install @tanstack/svelte-db

Vue

npm install @tanstack/vue-db

TanStack DB is compatible with Vue v3.3.0+

Angular

npm install @tanstack/angular-db

TanStack DB is compatible with Angular v16.0.0+

Vanilla JS

npm install @tanstack/db

Install the the core @tanstack/db package to use DB without a framework.

Collection Packages

TanStack DB also provides specialized collection packages for different data sources and storage needs:

Query Collection

For loading data using TanStack Query:

npm install @tanstack/query-db-collection

Use queryCollectionOptions to fetch data into collections using TanStack Query. This is perfect for REST APIs and existing TanStack Query setups.

Local Collections

LocalStorage, LocalOnly, and IndexedDB Collections are included in @tanstack/db and the framework packages:

• LocalStorage Collection - For persistent local data that syncs across browser tabs
• LocalOnly Collection - For temporary in-memory data and UI state
• IndexedDB Collection - For asynchronous browser persistence and structured values

Use localStorageCollectionOptions, localOnlyCollectionOptions, or indexedDBCollectionOptions from @tanstack/db or your framework package (e.g., @tanstack/react-db).

IndexedDB Collection

For local browser data stored in IndexedDB, install @tanstack/db or a framework package that re-exports it.

Use createIndexedDB to open a database, then indexedDBCollectionOptions to create Collections for its stores. The IndexedDB Collection guide covers setup, mutations, cross-tab synchronization, and connection ownership.

SQLite Persistence

Use a runtime package to save Collection rows in SQLite and load them after an app restart. For a browser app, install the OPFS wrapper and its SQLite engine:

npm install @tanstack/browser-db-sqlite-persistence @journeyapps/wa-sqlite

The SQLite Persistence guide shows the browser setup and lists the mobile, desktop, server, and Durable Object packages. It also explains how to wrap an existing sync adapter.

Offline Transactions

Use @tanstack/offline-transactions to retain pending mutations and retry them when the server is available:

npm install @tanstack/offline-transactions

The Offline Transactions guide covers web and React Native setup. It also shows how to use the outbox with a SQLite-persisted Collection.

Sync Engines

Electric Collection

For real-time sync with ElectricSQL:

npm install @tanstack/electric-db-collection

Use electricCollectionOptions to sync data from Postgres databases through ElectricSQL shapes. Ideal for real-time, local-first applications.

TrailBase Collection

For syncing with TrailBase backends:

npm install @tanstack/trailbase-db-collection

Use trailBaseCollectionOptions to sync records from TrailBase's Record APIs with built-in subscription support.

PowerSync Collection

For offline-first sync with PowerSync:

Use powerSyncCollectionOptions to sync data via PowerSync's SQLite-based database with real-time synchronization to PostgreSQL, MongoDB, and MySQL backends. Install the collection package plus the platform-specific PowerSync SDK and SQLite adapter:

Web

npm install @tanstack/powersync-db-collection @powersync/web @journeyapps/wa-sqlite

React Native

npm install @tanstack/powersync-db-collection @powersync/react-native @powersync/op-sqlite @op-engineering/op-sqlite

Or use @journeyapps/react-native-quick-sqlite as an alternative SQLite adapter.

See the PowerSync Collection documentation for setup details.

RxDB Collection

For offline-first apps and local persistence with RxDB:

npm install @tanstack/rxdb-db-collection

Use rxdbCollectionOptions to bridge an RxDB collection into TanStack DB. This gives you reactive TanStack DB collections backed by RxDB's powerful local-first database, replication, and conflict handling features.