> For the complete documentation index, see [llms.txt](https://block3d.gitbook.io/block3d/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://block3d.gitbook.io/block3d/getting-started.md).

# Getting Started

## Creating next-app

*If you already have Nextjs with app routing installed you can skip this step.*

Follow the steps on the Next.js [Installation page](https://nextjs.org/docs/getting-started/installation). 

*  If using `create-next-app`, make sure you input `Yes` when prompted: `Would you like to use App Router? (recommended) No / Yes`.
* If installing manually, ensure to [follow](https://nextjs.org/docs/getting-started/installation#the-app-directory) the `app routing` structure.

## Installation

#### NPM Package

Please note that some of **Block3d**'s transitive dependencies rely on [ws 8.13.0](https://www.npmjs.com/package/ws/v/8.13.0), which is a vulnerable version of [ws](https://www.npmjs.com/package/ws) that contains a high-level issue that has since then been [reviewed and patched](https://github.com/advisories/GHSA-3h5v-q93c-6h6q). To resolve these vulnerabilities you can set [override](https://docs.npmjs.com/cli/v10/configuring-npm/package-json#overrides)[s](https://docs.npmjs.com/cli/v10/configuring-npm/package-json#overrides) in your `package.json` file like so:

```json
"overrides": {
    "mipd": {
      "ws": "8.17.1"
    },
    "viem": {
      "ws": "8.17.1"
    }
  }
```

**Block3d** can then be installed by running this command:

{% tabs %}
{% tab title="npm" %}

```sh
npm install block3d
```

{% endtab %}

{% tab title="yarn" %}

```sh
yarn add block3d
```

{% endtab %}
{% endtabs %}

Finally, if you don't already have these installed, make sure to run this command as well:

{% tabs %}
{% tab title="npm" %}

```sh
npm install wagmi @rainbow-me/rainbowkit @tanstack/react-query viem@2.x
```

{% endtab %}

{% tab title="yarn" %}

```sh
yarn add wagmi @rainbow-me/rainbowkit @tanstack/react-query viem@2.x
```

{% endtab %}
{% endtabs %}

#### Git Submodule

**Block3d** alternatively comes in the form of a git submodule. This way you can quickly integrate the toolkit and, with minimal effort, be compatible with any future upgrades while maintaining a distinct separation of the submodule and the parent directory. This also allows you to fork **Block3d** and directly edit it however you want.

```sh
git submodule add https://github.com/RohanNero/block3d-submodule
```