Docs
Getting Started

Getting Started

Using create-starknet

The fastest way to get started using Starknet React is by using the create-starknet Command Line Interface (CLI). The tool will guide you through setting up your Starknet application.

npm
pnpm
yarn

_10
npm init starknet

Once the command finishes running, you can start the development server.

Manual setup

Installation

Add Starknet React and its dependencies to your project.

npm
pnpm
yarn

_10
npm install @starknet-react/chains @starknet-react/core starknet get-starknet-core

Configure the Starknet provider

The next step is to configure the Starknet provider. You need to configure the following:

  • chains: a list of chains supported by your dapp.
  • providers: the JSON-RPC provider you want to use. See the providers page for more information.
  • connectors: the wallet connectors supported by your dapp. See the wallets page for more information.
components/starknet-provider.tsx

_26
"use client";
_26
import React from "react";
_26
_26
import { goerli } from "@starknet-react/chains";
_26
import {
_26
StarknetConfig,
_26
publicProvider,
_26
argent,
_26
braavos,
_26
} from "@starknet-react/core";
_26
_26
export function StarknetProvider({ children }: { children: React.ReactNode }) {
_26
const chains = [goerli];
_26
const providers = [publicProvider()];
_26
const connectors = [braavos(), argent()];
_26
_26
return (
_26
<StarknetConfig
_26
chains={chains}
_26
providers={providers}
_26
connectors={connectors}
_26
>
_26
{children}
_26
</StarknetConfig>
_26
);
_26
}

Wrap your app in the provider

Wrap your app in the provider just created.

src/app.tsx

_10
import { StarknetProvider } from "@/components/starknet-provider";
_10
_10
export function App() {
_10
return (
_10
<StarknetProvider>
_10
<YourApp />
_10
</StarknetProvider>
_10
);
_10
}

Notice that if you are using Next.js app routes, you should place the provider in the root layout file.

app/layout.tsx

_13
import { StarknetProvider } from "@/components/starknet-provider";
_13
_13
export default function RootLayout({ children }: { children: React.ReactNode }) {
_13
return (
_13
<html lang="en">
_13
<body>
_13
<StarknetProvider>
_13
{children}
_13
</StarknetProvider>
_13
</body>
_13
</html>
_13
);
_13
}

Using hooks

You can now use the Starknet React hooks from any component wrapped by the root provider!