Installation

Install Reatom with your preferred package manager

Installation

Reatom is a framework-agnostic library with various adapters for different frameworks. By default, all docs and examples are written for React, but you can reuse each code example with any other framework.

Package Managers

Install Reatom using your preferred package manager:

npm

npm install @reatom/core @reatom/react

The examples above install both @reatom/core and @reatom/react. If you’re using a different framework, replace @reatom/react with the appropriate adapter (e.g., @reatom/vue, @reatom/solid).

Framework-Specific Installation

React

For React applications, install the core package and React adapter:

npm

npm install @reatom/core @reatom/react

Vue

For Vue applications:

npm

npm install @reatom/core @reatom/vue

Solid

For Solid applications:

npm

npm install @reatom/core @reatom/solid

Other Frameworks

Reatom also supports:

• Preact: @reatom/preact
• Lit: @reatom/lit
• Svelte: @reatom/svelte
• Angular: @reatom/angular

See the Framework Integrations section for more details.

Using a Template

For a fast start, you can use the official Reatom template with React and Mantine:

This template includes:

• Pre-configured React setup
• Mantine UI components
• Example features with search, filtering, and pagination
• Best practices and file structure

Core Only

If you’re building a framework-agnostic library or want to use Reatom without any UI framework:

npm

npm install @reatom/core

Package Size

Reatom is extremely lightweight:

• Core package: Just 2 KB gzipped
• Tree-shakeable: Only pay for what you use
• Zero dependencies: No bloat in your bundle

All Reatom packages are tree-shakeable, so you can import only the features you need without worrying about bundle size.

TypeScript Support

Reatom is written in TypeScript and provides excellent type inference out of the box. No additional type definitions are needed.

import { atom, computed } from '@reatom/core'

// Types are automatically inferred
const count = atom(0) // Atom<number>
const doubled = computed(() => count() * 2) // Computed<number>

Verify Installation

To verify that Reatom is installed correctly, create a simple test file:

test.ts

import { atom } from '@reatom/core'

const counter = atom(0)

console.log(counter()) // 0

counter.set(1)
console.log(counter()) // 1

counter.set((state) => state + 5)
console.log(counter()) // 6

If this runs without errors, you’re ready to go!

Next Steps

Quick Start

Build your first counter app with Reatom

Core Concepts

Learn about atoms, computed, and effects