Skip to main content
This example demonstrates how to create a basic counter store using the Create Zustand CLI. You’ll see how to set up state management for a simple counter with increment, decrement, and reset functionality.

​
CLI Interaction

When you run create-zustand-store, you’ll be prompted with a series of questions. Here’s how to configure a counter store: 
$ create-zustand-store

      ╔════════════════════════════════════════╗
      ║                                        ║
      ║        Zustand Store CLI Tool          ║
      ║    Easily create and manage stores     ║
      ║                                        ║
      ╚════════════════════════════════════════╝

➤ What is the name of your store? useCounterStore
➤ Choose the file type: TypeScript
➤ Do you want to add persistence? No
➤ Define initial state properties (as JSON): {"count":0}
➤ Define actions (comma-separated): increment,decrement,reset
➤ Choose your package manager: npm
➤ Enter the custom path for the store directory: store
➤ Do you want to save these settings as default? No

✔ Zustand store "useCounterStore" created successfully in the "store" directory.

​
Generated Store Code

The CLI generates the following store file based on your inputs:
store/useCounterStore.ts
import { create } from "zustand";

interface State {
  count: number;
  actions: {
    increment: () => void;
    decrement: () => void;
    reset: () => void;
  };
}

const useCounterStore = create<State>((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;

​
Customizing Actions

After generating the store, you’ll need to implement the action logic. The CLI creates placeholder actions that you can customize: 
const useCounterStore = create<State>((set) => ({
  count: 0,
  actions: {
    increment: () => set((state) => ({ count: state.count + 1 })),
    decrement: () => set((state) => ({ count: state.count - 1 })),
    reset: () => set({ count: 0 }),
  },
}));

​
Using the Store in a Component

Once you’ve generated and customized your counter store, you can use it in your React components:
Counter.tsx
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;

​
Alternative: Selecting Individual Actions

For better performance, you can select individual actions instead of destructuring the entire actions object: 
const increment = useCounterStore((state) => state.actions.increment);
const decrement = useCounterStore((state) => state.actions.decrement);
const reset = useCounterStore((state) => state.actions.reset);
This approach ensures that your component only re-renders when the specific state slices you’re using change.

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us