How do I install the Flow React Sdk skill?

Run npx skillmds@latest add onflow/flow-react-sdk in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Flow React Sdk safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Flow React Sdk?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Flow React Sdk free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Flow React Sdk?

onflow (@onflow) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Flow React Sdk by onflow — Agent Skill

Name: Flow React Sdk
Author: onflow

Flow React Sdk

Guide for building React applications on the Flow blockchain using @onflow/react-sdk. Covers FlowProvider setup, Cadence hooks (useFlowQuery, useFlowMutate, useFlowCurrentUser, useFlowEvents), Cross-VM hooks for EVM bridging and batch transactions, and UI components (Connect, TransactionButton, TransactionDialog, NftCard). Built on TanStack Query with TypeScript support. TRIGGER when: building React apps on Flow, using @onflow/react-sdk, setting up FlowProvider, using Flow React hooks, "useFlowQuery", "useFlowMutate", "useFlowCurrentUser", "Connect component", "TransactionButton", "wallet connect react", "react flow app", "FCL React", "flow react hooks", "bridge tokens react", "cross-vm react", "NftCard", "useFlowEvents", "how to query Flow from React", "authenticate user in React". DO NOT TRIGGER when: writing Cadence contracts (use cadence-lang), configuring flow.json without React (use flow-project-setup), building non-React frontends or backends, auditing code (use cadence-audit).

onflow f00c382 5 files · 22.0 KB Updated Sep 17, 2026

File contents

Flow React SDK

Build React apps on Flow with TypeScript-first hooks and components. Built on TanStack Query for automatic caching, retries, and background updates.

Quick Start

npm install @onflow/react-sdk

import { FlowProvider, Connect, useFlowQuery } from '@onflow/react-sdk';

function App() {
  return (
    <FlowProvider config={{ accessNodeUrl: 'https://access-mainnet.onflow.org', flowNetwork: 'mainnet' }}>
      <Connect />
      <MyComponent />
    </FlowProvider>
  );
}

Navigation Map

Task	Reference
Installation, FlowProvider, Next.js, theming, dark mode	setup.md
Cadence hooks: query, mutate, auth, events, accounts, blocks, NFT metadata	hooks.md
Cross-VM hooks: EVM batch tx, token/NFT bridging, cross-chain balances	cross-vm.md
UI components: Connect, TransactionButton, TransactionDialog, NftCard	components.md

Companion Skills

cadence-lang — Consult when writing Cadence scripts/transactions used in useFlowQuery and useFlowMutate. The Cadence code passed to hooks must follow all language rules (access control, entitlements, resource handling).
flow-project-setup — Consult for flow.json configuration that FlowProvider loads via flowJson prop. Contract addresses and network config must be aligned.
flow-cli — Use to test scripts and transactions via CLI before integrating them into React hooks.
cadence-tokens — Consult when using useFlowNftMetadata or building NFT/FT frontends for the correct MetadataViews and collection paths.

---name: flow-react-sdkdescription: Guide for building React applications on the Flow blockchain using @onflow/react-sdk. Covers FlowProvider setup, Cadence hooks (useFlowQuery, useFlowMutate, useFlowCurrentUser, useFlowEvents), Cross-VM hooks for EVM bridging and batch transactions, and UI components (Connect, TransactionButton, TransactionDialog, NftCard). Built on TanStack Query with TypeScript support. TRIGGER when: building React apps on Flow, using @onflow/react-sdk, setting up FlowProvider, using Flow React hooks, "useFlowQuery", "useFlowMutate", "useFlowCurrentUser", "Connect component", "TransactionButton", "wallet connect react", "react flow app", "FCL React", "flow react hooks", "bridge tokens react", "cross-vm react", "NftCard", "useFlowEvents", "how to query Flow from React", "authenticate user in React". DO NOT TRIGGER when: writing Cadence contracts (use cadence-lang), configuring flow.json without React (use flow-project-setup), building non-React frontends or backends, auditing code (use cadence-audit).---# Flow React SDKBuild React apps on Flow with TypeScript-first hooks and components. Built on TanStack Query for automatic caching, retries, and background updates.## Quick Start```bashnpm install @onflow/react-sdk``````tsximport { FlowProvider, Connect, useFlowQuery } from '@onflow/react-sdk';function App() { return ( <FlowProvider config={{ accessNodeUrl: 'https://access-mainnet.onflow.org', flowNetwork: 'mainnet' }}> <Connect /> <MyComponent /> </FlowProvider> );}```## Navigation Map| Task | Reference ||------|-----------|| Installation, FlowProvider, Next.js, theming, dark mode | [setup.md](references/setup.md) || Cadence hooks: query, mutate, auth, events, accounts, blocks, NFT metadata | [hooks.md](references/hooks.md) || Cross-VM hooks: EVM batch tx, token/NFT bridging, cross-chain balances | [cross-vm.md](references/cross-vm.md) || UI components: Connect, TransactionButton, TransactionDialog, NftCard | [components.md](references/components.md) |## Companion Skills- **`cadence-lang`** — Consult when writing Cadence scripts/transactions used in `useFlowQuery` and `useFlowMutate`. The Cadence code passed to hooks must follow all language rules (access control, entitlements, resource handling).- **`flow-project-setup`** — Consult for `flow.json` configuration that FlowProvider loads via `flowJson` prop. Contract addresses and network config must be aligned.- **`flow-cli`** — Use to test scripts and transactions via CLI before integrating them into React hooks.- **`cadence-tokens`** — Consult when using `useFlowNftMetadata` or building NFT/FT frontends for the correct MetadataViews and collection paths.

Frequently asked questions