> ## Documentation Index
> Fetch the complete documentation index at: https://docs.zopio.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Zustand

> A small, fast, and scalable bearbones state-management solution for React applications. It provides a simple and efficient way to manage state in your application.

### Installation

To install Zustand, run the following command:

```sh Terminal theme={"system"}
pnpm add zustand
```

### Usage

Here is an example of how to use Zustand for state management:

```tsx counter.tsx theme={"system"}
import create from 'zustand';

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

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

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}
```

In this example, the `create` function from Zustand is used to create a store with a `count` state and `increment` and `decrement` actions. The `useStore` hook is then used in the `Counter` component to access the state and actions.

### Benefits

* <Icon icon="check" iconType="solid" /> **Simple API**: Zustand provides a simple and intuitive API for managing state in your React application.
* <Icon icon="check" iconType="solid" /> **Performance**: Zustand is optimized for performance, making it suitable for large-scale applications.
* <Icon icon="check" iconType="solid" /> **Scalability**: Zustand is scalable and can be used to manage state in applications of any size.

For more information and detailed documentation, visit the [Zustand website](https://zustand.docs.pmnd.rs/guides/nextjs).