Skip to main content

​
General Questions

Create Zustand CLI is a command-line tool that helps you quickly scaffold Zustand stores in your JavaScript or TypeScript projects. It provides an interactive interface to configure your store with options for persistence, initial state, actions, and more.
No, the CLI will automatically check if Zustand is installed in your project and install it if it’s missing. The CLI supports both npm and yarn package managers.
Yes! The CLI is designed to work with existing projects. Simply navigate to your project directory and run create-zustand-store. The tool will create the store in the directory you specify.
You need Node.js version 14 or higher, as the CLI uses ES modules and modern JavaScript features. Check your version with node --version.

​
Installation & Setup

Currently, you need to clone the repository and use npm link:
git clone https://github.com/abubakardev0/zustand-store-cli.git
cd zustand-store-cli
npm install
npm link
After linking, you can use the create-zustand-store command from anywhere.
Yes, to unlink the CLI:
cd zustand-store-cli
npm unlink
Or globally:
npm unlink -g create-zustand-store

​
Using the CLI

The store name is the name of your Zustand hook. By convention, it starts with “use” (e.g., useStore, useCartStore, useAuthStore). This becomes both the function name and the filename.
Choose TypeScript if your project uses TypeScript. The CLI will generate properly typed stores with interfaces. Choose JavaScript for plain JS projects. You can always convert between them later.
Provide the initial state as valid JSON. Examples:
  • Simple: {"count": 0}
  • Complex: {"user": {"name": "John", "age": 30}, "isLoggedIn": false}
  • Array: {"items": [], "total": 0}
Make sure to use valid JSON syntax with quotes around property names!
Actions are methods that modify your store’s state. Enter them as comma-separated names (e.g., increment,decrement,reset). The CLI generates empty implementations that you’ll need to fill in with your logic.
Yes! When the CLI asks “Do you want to save these settings as default?”, answer yes. This creates a zustand-store-config.json file in your project that will pre-fill answers for future stores.

​
Zustand & State Management

Zustand is a small, fast, and scalable state management solution for React. It uses hooks and doesn’t require wrapping your app in providers. Learn more at zustand.docs.pmnd.rs.
No! Unlike Redux or Context API, Zustand doesn’t require providers. Just import and use your store hook directly in any component.
Absolutely! Run create-zustand-store multiple times to create different stores for different concerns (e.g., useAuthStore, useCartStore, useUIStore).
Import the hook and use it in your component:
import useStore from './store/useStore';

function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.actions.increment);
  
  return <button onClick={increment}>{count}</button>;
}

​
Persistence

Persistence automatically saves your store’s state to localStorage (in browsers) or AsyncStorage (in React Native). When the app reloads, the state is restored from storage.
Use persistence when you want state to survive page refreshes, such as:
  • User preferences (theme, language)
  • Shopping cart contents
  • Form draft data
  • Authentication state
Don’t persist sensitive data like passwords or tokens in localStorage!
The generated store uses Zustand’s persist middleware, which supports AsyncStorage for React Native. You’ll need to configure it manually after generation:
import AsyncStorage from '@react-native-async-storage/async-storage';

persist(
  (set) => ({ /* ... */ }),
  {
    name: 'store-name',
    storage: AsyncStorage,
  }
)
In the browser, you can clear localStorage:
localStorage.removeItem('your-store-name');
// or clear everything
localStorage.clear();
Or use the browser’s DevTools > Application > Local Storage.

​
Customization

Yes! The CLI asks for a custom path. Enter any relative path like:
  • store (default)
  • src/store
  • lib/state
  • hooks/stores
Absolutely! The generated files are yours to customize. The CLI just provides a starting point. Add your own logic, types, middleware, or restructure as needed.
Yes, just edit the generated store file and add new actions to the actions object. You don’t need to regenerate the entire store.

​
Troubleshooting

Make sure your initial state is valid JSON with quotes around property names and string values:
  • ✅ Correct: {"count": 0, "name": "test"}
  • ❌ Wrong: {count: 0, name: test}
The CLI generates empty action implementations. You need to add your logic:
actions: {
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}
Check out:

Build docs developers (and LLMs) love

Get started for freeTalk to us