Skip to main content

Installation Instructions


If you're using a JS framework such as next.js, check out the detailed instructions for it. The instructions below should work for most setups though.

Shortcut: CRA template#

To create a new app based on kea's create-react-app typescript template, run the following:

yarn create react-app --template kea-typescript my-kea-app
cd my-kea-app
yarn start

This sets up a new project with kea and kea-typegen, and adds the plugins kea-router and kea-loaders. It's the fastest way to just try out Kea.

Install Kea manually#

Installing kea is rather straightforward. You need to install some packages, optionally call resetContext and wrap your app with a <Provider /> tag.

1. Install some packages#

In addition to kea you will also need redux, react-redux and reselect.

# if you're using yarn
yarn add kea redux react-redux reselect
# if you're using npm
npm install kea redux react-redux reselect --save

2. Set up Kea's context#

Kea stores all of its data on a context, which must be set up before any logic can be used. This context stores a reference to the redux store, initializes all plugins, caches all built logic and keeps track of what is mounted and what is not.

To set it up, just call resetContext(options) before rendering your app.

3. Wrap with <Provider />#

Then wrap your <App /> with <Provider />.

This is how your index.js would look like if you used create-react-app:

import React from 'react'
import ReactDOM from 'react-dom'
import { resetContext, Provider } from 'kea' // ๐Ÿ‘ˆ add this
import './index.css'
import App from './App'
resetContext({ // ๐Ÿ‘ˆ add this
createStore: {
// options for redux (e.g. middleware, reducers, ...)
plugins: [
// additional kea plugins
ReactDOM.render( // ๐Ÿ‘ˆ and update this
<App />

That's it! Feel free to use kea() calls anywhere in your code!

4. TypeScript support#

If you're using TypeScript (and everybody should), you'll need to set up kea-typegen as well.

First, run the following:

yarn add kea-typegen concurrently --dev

Then add the following to your .gitignore:

# kea

Finally, change your start script in package.json

"scripts": {
"start": "concurrently \"yarn start:app\" \"yarn start:kea\" -n APP,KEA -c blue,green",
"start:app": "react-scripts start # put your old 'start' script here",
"start:kea": "kea-typegen watch"

Read more about TypeScript Support in Kea.

Next Steps
  • Read Core Concepts to get a good understanding of how Kea works and why.