> ## Documentation Index
> Fetch the complete documentation index at: https://kit.near.tools/llms.txt
> Use this file to discover all available pages before exploring further.
# Provider Setup
> Configure the NearProvider for your React application
The `NearProvider` component makes a `Near` client instance available to all components in your app via React Context.
## Basic Setup
Create your `Near` instance with your desired configuration. This can be done outside your component tree.
```tsx theme={null}
import { Near } from "near-kit"
const near = new Near({
network: "mainnet",
})
```
Place the `NearProvider` at the root of your component tree.
```tsx theme={null}
import { NearProvider } from "@near-kit/react"
function App() {
return (
)
}
```
All hooks from `@near-kit/react` will now have access to the Near client.
```tsx theme={null}
import { useBalance } from "@near-kit/react"
function WalletDisplay() {
const { data: balance } = useBalance({ accountId: "alice.near" })
return
Balance: {balance}
}
```
## Provider Props
The Near client instance to provide to all child components.
React children to render inside the provider.
## useNear Hook
Access the Near client directly when you need the full API:
```tsx theme={null}
import { useNear } from "@near-kit/react"
function AdvancedComponent() {
const near = useNear()
const handleComplex = async () => {
// Full access to the Near client API
const result = await near
.transaction("alice.near")
.functionCall("contract.near", "method", { arg: "value" })
.transfer("bob.near", "1 NEAR")
.send()
}
return
}
```
`useNear()` will throw an error if called outside of a `NearProvider`. Always ensure your components are wrapped.
## Framework-Specific Setup
Create a client component for the provider:
```tsx theme={null}
// providers/near-provider.tsx
"use client"
import { Near } from "near-kit"
import { NearProvider } from "@near-kit/react"
const near = new Near({ network: "mainnet" })
export function NearProviderWrapper({ children }: { children: React.ReactNode }) {
return {children}
}
```
Use it in your root layout:
```tsx theme={null}
// app/layout.tsx
import { NearProviderWrapper } from "@/providers/near-provider"
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
```
The `@near-kit/react` package includes the `"use client"` directive, so you don't need to add it to your imports. However, components using the hooks must be client components.
Set up the provider in `_app.tsx`:
```tsx theme={null}
// pages/_app.tsx
import type { AppProps } from "next/app"
import { Near } from "near-kit"
import { NearProvider } from "@near-kit/react"
const near = new Near({ network: "mainnet" })
export default function App({ Component, pageProps }: AppProps) {
return (
)
}
```
Set up the provider in your entry point:
```tsx theme={null}
// main.tsx or index.tsx
import React from "react"
import ReactDOM from "react-dom/client"
import { Near } from "near-kit"
import { NearProvider } from "@near-kit/react"
import App from "./App"
const near = new Near({ network: "mainnet" })
ReactDOM.createRoot(document.getElementById("root")!).render(
)
```
## With Wallet Connection
For dApps where users connect their own wallets, create the Near instance dynamically:
```tsx theme={null}
"use client"
import { useState, useEffect } from "react"
import { Near, fromHotConnect } from "near-kit"
import { NearProvider } from "@near-kit/react"
import { NearConnector } from "@hot-labs/near-connect"
export function WalletProvider({ children }: { children: React.ReactNode }) {
const [near, setNear] = useState(null)
useEffect(() => {
const connector = new NearConnector({ network: "mainnet" })
connector.on("wallet:signIn", async () => {
setNear(
new Near({
network: "mainnet",
wallet: fromHotConnect(connector),
})
)
})
connector.connect()
}, [])
// Show loading or connect button when not connected
if (!near) {
return
}
return {children}
}
```
For a complete wallet integration example, see the [Frontend Integration](/dapp-workflow/frontend-integration) guide.
## Error: Nested Provider
`NearProvider` throws an error if nested inside another `NearProvider`. This prevents accidental context shadowing.
```tsx theme={null}
// ❌ This will throw an error
{/* Error! */}
// ✅ Use a single provider at the root
```
If you need multiple Near clients (rare), manage them outside of context:
```tsx theme={null}
const mainnetNear = new Near({ network: "mainnet" })
const testnetNear = new Near({ network: "testnet" })
// Use the specific client directly where needed
const balance = await testnetNear.getBalance("alice.testnet")
```