Skip to main content
Zustand is available as a package on npm and can be installed using any popular JavaScript package manager.

​
Package managers

Choose your preferred package manager to install Zustand: 
npm install zustand
Zustand requires React 16.8+ (the version that introduced hooks). For TypeScript users, TypeScript 4.5+ is recommended for best type inference.

​
CDN usage

You can also use Zustand directly from a CDN for quick prototyping or experiments: 
<script type="module">
  import { create } from 'https://esm.sh/zustand'
  
  const useStore = create((set) => ({
    count: 0,
    inc: () => set((state) => ({ count: state.count + 1 }))
  }))
</script>
CDN imports are suitable for prototypes and learning, but for production applications, use a package manager to ensure proper version control and build optimization.

​
Requirements

​
Runtime requirements

  • React: 16.8.0 or higher (hooks support)
  • React DOM: Matches your React version

​
Development requirements

For the best development experience:
  • TypeScript: 4.5.0 or higher (optional, but recommended)
  • React DevTools: Browser extension for debugging
  • Redux DevTools: Browser extension for using the devtools middleware

​
Verify installation

After installation, verify Zustand is working correctly:
1

Create a test store

Create a simple store in a new file:
test-store.js
import { create } from 'zustand'

export const useTestStore = create((set) => ({
  message: 'Zustand is installed!',
  updateMessage: (msg) => set({ message: msg })
}))
2

Use the store in a component

Import and use your store:
App.jsx
import { useTestStore } from './test-store'

function App() {
  const message = useTestStore((state) => state.message)
  return <h1>{message}</h1>
}
3

Run your application

Start your development server and verify the message displays correctly. If you see “Zustand is installed!”, you’re ready to go!

​
TypeScript setup

Zustand works out of the box with TypeScript. No additional type packages are needed: 
import { create } from 'zustand'

interface StoreState {
  count: number
  increment: () => void
}

const useStore = create<StoreState>()((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 }))
}))
Notice the extra () after create<StoreState>()? This is required for TypeScript to properly infer types. See the TypeScript guides for more details.

​
Framework integration

Zustand works seamlessly with popular React frameworks:
Zustand works with both the Pages Router and App Router:
npm install zustand
For App Router (React Server Components), ensure stores are only used in Client Components:
'use client'

import { create } from 'zustand'

export const useStore = create((set) => ({ ... }))

​
React Native

Zustand works great with React Native: 
npm install zustand
For persistence with AsyncStorage: 
npm install zustand @react-native-async-storage/async-storage
Then configure the persist middleware with AsyncStorage: 
import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'
import AsyncStorage from '@react-native-async-storage/async-storage'

const useStore = create(
  persist(
    (set) => ({ ... }),
    {
      name: 'app-storage',
      storage: createJSONStorage(() => AsyncStorage)
    }
  )
)

​
Next steps

Now that Zustand is installed, you’re ready to build your first store:

Quick start

Create your first store and use it in components

Introduction

Learn about Zustand’s philosophy and key features

Build docs developers (and LLMs) love

Get started for freeTalk to us