Skip to main content
Create a simple Zustand store using JavaScript to manage your application’s state. This guide walks you through creating a basic store with initial state and actions.

​
What You’ll Build

You’ll create a basic counter store that demonstrates:
  • Setting up initial state
  • Defining actions to modify state
  • Using the Zustand create function
1
Run the CLI
2
Start by running the Create Zustand CLI tool:
3
create-zustand-store
4
Configure Your Store
5
Answer the prompts to configure your store:
6
Store Name
➤ What is the name of your store?
useCounterStore
File Type
➤ Choose the file type:
JavaScript
Persistence
➤ Do you want to add persistence?
No
Initial State
➤ Define initial state properties (as JSON):
{"count": 0}
Actions
➤ Define actions (comma-separated):
increment,decrement,reset
7
Review the Generated Store
8
The CLI generates a store file based on this template:
9
import { create } from "zustand";

const useCounterStore = create((set) => ({
  count: 0,
  actions: {
    increment: () => set((state) => ({})),
    decrement: () => set((state) => ({})),
    reset: () => set((state) => ({}))
  },
}));

export default useCounterStore;
10
Implement Your Actions
11
Update the action implementations to actually modify state:
12
import { create } from "zustand";

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

export default useCounterStore;
13
Use Your Store
14
Import and use the store in your React components:
15
import useCounterStore from '../store/useCounterStore';

function Counter() {
  const count = useCounterStore((state) => state.count);
  const { increment, decrement, reset } = useCounterStore(
    (state) => state.actions
  );

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

export default Counter;

​
Understanding the Template

The CLI uses this template structure from templates/store.js: 
import { create } from "zustand";

const use__STORE_NAME__ = create((set) => ({
  __INITIAL_STATE__,
  actions: {
    __ACTIONS__,
  },
}));

export default use__STORE_NAME__;
The placeholders are replaced with:
  • __STORE_NAME__: Your store name (e.g., CounterStore)
  • __INITIAL_STATE__: Your JSON state properties (e.g., count: 0)
  • __ACTIONS__: Your comma-separated actions as function stubs

​
Next Steps

TypeScript Store

Add type safety to your stores

Persistent Store

Save state to localStorage

Build docs developers (and LLMs) love

Get started for freeTalk to us