How to Install Zustand with pnpm/npm

Zustand is one of the lightest and most intuitive state management libraries for React. No boilerplate hell like Redux, almost zero configuration. This post covers how to install Zustand using pnpm and npm.

Installation

npm

npm install zustand

pnpm

pnpm add zustand

That's it. Seriously.

TypeScript Support

Zustand ships with built-in type definitions, so there's no need to install a separate @types/zustand package. It works out of the box in TypeScript projects.

Basic Usage

Once installed, let's create a simple store.

import { create } from 'zustand';

interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
}

const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

Use it in a component like this:

function Counter() {
  const { count, increment, decrement } = useCounterStore();

  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

No Provider wrapper needed. Just call the hook and you're good to go.

Commonly Used Middleware

Zustand comes with several useful built-in middleware.

# No extra install needed — included in the zustand package

• persist — Automatically save/restore state to localStorage
• devtools — Redux DevTools integration
• immer — Immer middleware (requires immer as a separate dependency)

If you want to use the immer middleware, just install immer:

# npm
npm install immer

# pnpm
pnpm add immer

Verify Installation

Check the installed version:

# npm
npm list zustand

# pnpm
pnpm list zustand

Summary

Zustand is small, fast, and easy to use. If you want to start managing state without complex setup, it's the best choice out there.