Skip to main content
This guide will walk you through creating your first Zustand store using the CLI. You’ll learn how to use the interactive prompts and understand what gets generated.

​
Create your first store

Navigate to your project directory and run the CLI: 
create-zustand-store
You’ll see the welcome banner: 
╔════════════════════════════════════════╗
║                                        ║
║        Zustand Store CLI Tool          ║
║    Easily create and manage stores     ║
║                                        ║
╚════════════════════════════════════════╝

​
Interactive prompts

The CLI will guide you through several prompts to configure your store:
1

Store name

Choose a name for your store:
➤ What is the name of your store? (useStore)
Store names typically follow the pattern useStoreName (e.g., useCounterStore, useUserStore).
2

File type

Select whether you want JavaScript or TypeScript:
➤ Choose the file type: (Use arrow keys)
❯ JavaScript
  TypeScript
TypeScript stores include full type definitions and interfaces.
3

Persistence

Decide if you want to add state persistence:
➤ Do you want to add persistence? (y/N)
Answering “yes” adds the Zustand persist middleware, which saves your state to localStorage.
4

Initial state

Define your store’s initial state as JSON:
➤ Define initial state properties (as JSON, e.g., {"count":0} or {"user":{"name":"John","age":30}}): ({})
Examples:
  • Simple counter: {"count":0}
  • User data: {"user":{"name":"","email":""}}
  • Shopping cart: {"items":[],"total":0}
5

Actions

Specify actions for your store (comma-separated):
➤ Define actions (comma-separated, e.g., increment,reset):
Examples:
  • increment,decrement,reset
  • addItem,removeItem,clearCart
  • login,logout,updateProfile
6

Package manager

Choose your preferred package manager:
➤ Choose your package manager: (Use arrow keys)
❯ npm
  yarn
The CLI uses this to install Zustand if it’s not already in your project.
7

Store path

Specify where to create the store file:
➤ Enter the custom path for the store directory: (store)
Common paths include store, stores, src/store, or src/stores.
8

Save configuration

Optionally save your settings as defaults:
➤ Do you want to save these settings as default? (y/N)
If you answer “yes”, a zustand-store-config.json file is created with your preferences.

​
Example: Counter store

Let’s create a simple counter store: 
What is the name of your store? useCounterStore
Choose the file type: TypeScript
Do you want to add persistence? No
Define initial state properties: {"count":0}
Define actions: increment,decrement,reset
Choose your package manager: npm
Enter the custom path for the store directory: src/store
Do you want to save these settings as default? No
The generated actions include placeholder implementations with set((state) => ({})). You’ll need to implement the actual logic for each action.

​
What happens next

After you complete the prompts, the CLI will:
  1. Create the store directory if it doesn’t exist
  2. Generate the store file with your configuration
  3. Check if Zustand is installed in your project
  4. Install Zustand automatically if needed
  5. Display a success message
You’ll see output like: 
✔ Zustand store "useCounterStore" created successfully in the "src/store" directory.
✔ zustand is already installed.

​
Using your store

Once created, you can import and use your store in any component: 
import useCounterStore from './store/useCounterStore';

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

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

​
Implementing actions

Remember to implement the actual logic for your actions. Here’s how the counter actions should look: 
actions: {
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}

​
Using saved configurations

If you saved your configuration, the CLI will automatically load it the next time you run create-zustand-store. You’ll see: 
✔ Loaded default configuration.
All prompts will use your saved values as defaults, which you can accept or override.

​
Next steps

Configuration

Learn about advanced configuration options

Templates

Understand the generated store templates

Build docs developers (and LLMs) love

Get started for freeTalk to us