> For the complete documentation index, see [llms.txt](https://fifo-docs.gitbook.io/colibri/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://fifo-docs.gitbook.io/colibri/colibri-react/react.md). # Overview Headless React bindings for Stellar applications: connection state, cached reads, explicit contract invocations, existing transaction pipelines, events and SEPs. The React package is a [0.x preview](/colibri/getting-started/compatibility.md). React 19.1+ in the 19.x line and TanStack Query 5.87+ in the 5.x line are supported. The app owns its configuration, wallet SDKs and signing authority. [`ColibriQueryProvider`](/colibri/colibri-react/setup.md) can own the query cache or reuse the application cache. See [installation](/colibri/getting-started/installation.md) for the current package versions. ## Install Follow [installation and provider setup](/colibri/colibri-react/setup.md#install). ## Start with a balance The [complete TSX balance example](/colibri/colibri-react/setup.md#start-with-a-balance) uses [`ColibriQueryProvider`](/colibri/colibri-react/setup.md) and displays a funded account’s balance. See [common workflows and convenience APIs](/colibri/colibri-react/convenience.md) for complete provider, wallet and combined signing setup. Granular APIs remain available. ## Feature imports Import runtime features from their documented subpaths. The root contains only configuration, provider, connection hooks and integration errors. Shared type exports are erased from JavaScript. | Import after `@colibri/react` | APIs | | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | root | [`createColibriConfig`](/colibri/colibri-react/setup.md), [`ColibriProvider`](/colibri/colibri-react/setup.md), [`useColibriConfig`](/colibri/colibri-react/hooks/use-colibri-config.md), [`useConnection`](/colibri/colibri-react/hooks/use-connection.md), [`useConnect`](/colibri/colibri-react/hooks/use-connect.md), [`useReconnect`](/colibri/colibri-react/hooks/use-reconnect.md), [`useDisconnect`](/colibri/colibri-react/hooks/use-disconnect.md), [`useNetwork`](/colibri/colibri-react/hooks/use-network.md) | | `/provider` | [`ColibriQueryProvider`](/colibri/colibri-react/setup.md) | | `/wallet` | [`useWallet`](/colibri/colibri-react/hooks/use-wallet.md) | | `/rpc` | [`useRpc`](/colibri/colibri-react/hooks/use-rpc.md), [`useLatestLedger`](/colibri/colibri-react/hooks/use-latest-ledger.md), [`useTransaction`](/colibri/colibri-react/hooks/use-transaction.md), [`useWaitForTransaction`](/colibri/colibri-react/hooks/use-wait-for-transaction.md) | | `/accounts` | [`useAccount`](/colibri/colibri-react/hooks/use-account.md), [`useTrustline`](/colibri/colibri-react/hooks/use-trustline.md), [`useLedgerEntries`](/colibri/colibri-react/hooks/use-ledger-entries.md) | | `/assets` | [`useBalance`](/colibri/colibri-react/hooks/use-balance.md), [`useTokenMetadata`](/colibri/colibri-react/hooks/use-token-metadata.md) | | `/contracts` | [`useContract`](/colibri/colibri-react/hooks/use-contract.md) and its full client type | | `/contracts/read` | [`useContractRead`](/colibri/colibri-react/hooks/use-contract-read.md), [`useContractReadSpec`](/colibri/colibri-react/hooks/use-contract-read-spec.md), [`contractReadQueryOptions`](/colibri/colibri-react/hooks/use-contract-read-spec.md) | | `/contracts/invoke` | [`useContractInvoke`](/colibri/colibri-react/hooks/use-contract-invoke.md), [`useWalletContractInvoke`](/colibri/colibri-react/hooks/use-wallet-contract-invoke.md) | | `/transactions/classic` | [`useClassicTransaction`](/colibri/colibri-react/hooks/use-classic-transaction.md) | | `/transactions/soroban` | [`useSorobanTransaction`](/colibri/colibri-react/hooks/use-soroban-transaction.md) | | `/transactions/simulate` | [`useSimulateSorobanTransaction`](/colibri/colibri-react/hooks/use-simulate-soroban-transaction.md) | | `/query` | [`colibriQueryKey`](/colibri/colibri-react/queries.md), [`colibriQueryOptions`](/colibri/colibri-react/queries.md), [`queryValue`](/colibri/colibri-react/queries.md), query/mutation controls | | `/query/mutation` | [`useColibriMutation`](/colibri/colibri-react/hooks/use-colibri-mutation.md) | | `/events` | [`createContractEvents`](/colibri/colibri-react/hooks/use-contract-events.md), [`useContractEvents`](/colibri/colibri-react/hooks/use-contract-events.md) | | `/webauth` | [`useWebAuthClient`](/colibri/colibri-react/hooks/use-web-auth-client.md), [`useWebAuth`](/colibri/colibri-react/hooks/use-web-auth.md), [`useSession`](/colibri/colibri-react/hooks/use-session.md), session factory | | `/session` | Framework-independent [`createWebAuthSession`](/colibri/colibri-react/wallets-and-sessions.md#webauth), [`WebAuthSession`](/colibri/colibri-react/wallets-and-sessions.md#webauth) | | `/sep1` | [`useStellarToml`](/colibri/colibri-react/hooks/use-stellar-toml.md) | | `/ecosystem/stellar-wallets-kit` | [`createStellarWalletsKitConnector`](/colibri/colibri-react/wallets-and-sessions.md#stellar-wallets-kit) | | `/ecosystem/freighter` | [`createFreighterConnector`](/colibri/colibri-react/wallets-and-sessions.md#direct-freighter) | | `/signers` | [`useSigners`](/colibri/colibri-react/hooks/use-signers.md), [`useSignMessage`](/colibri/colibri-react/hooks/use-sign-message.md), explicit connection guards | | `/wallets` | [`createWalletConnector`](/colibri/colibri-react/wallets-and-sessions.md), [`createWalletEnvelopeSigner`](/colibri/colibri-react/wallets-and-sessions.md) | | `/wallets/auth-entry` | [`createWalletAuthEntrySigner`](/colibri/colibri-react/wallets-and-sessions.md#explicit-authorization-entry-signing) | | `/wallets/signer` | [`createWalletSigner`](/colibri/colibri-react/convenience.md#one-signer-for-both-transaction-stages) | | `/identicon` | [`useIdenticon`](/colibri/colibri-react/hooks/use-identicon.md), unstyled [`AccountIdenticon`](/colibri/colibri-react/hooks/use-identicon.md) | ## Contracts and transactions Keep full clients and their plugins with [useContract](/colibri/colibri-react/hooks/use-contract.md), read through a generated helper or an ABI spec, and invoke only from explicit user actions. [useWalletContractInvoke](/colibri/colibri-react/hooks/use-wallet-contract-invoke.md) fills missing transaction source and signers from the connected wallet; explicit overrides remain available. [Contract and pipeline recipes](/colibri/colibri-react/contracts-and-transactions.md) explain [transaction configuration](/colibri/colibri-core/transaction-config.md), simulation and event subscriptions. ## Stellar identities and SEPs * XLM: `{ kind: "xlm" }`. * Classic issued asset: `{ kind: "classic", code, issuer }`. * [SEP-41](/colibri/colibri-core/asset/sep-41-token-contract.md) token, including a SAC: `{ kind: "sep41", contractId }`. Classic account/trustline reads use G-addresses. [SEP-41](/colibri/colibri-core/asset/sep-41-token-contract.md) balances accept G or C addresses; muxed attribution belongs to the transaction destination, not a separate balance. A C-address does not imply an Ed25519 signing capability. The package composes existing Colibri support: [SEP-1](/colibri/colibri-core/sep1.md) discovery, SEP-10/45 WebAuth, [SEP-41](/colibri/colibri-core/asset/sep-41-token-contract.md) tokens and event values, [SEP-33](/colibri/colibri-identicon/identicon.md) SVG identicons and optional [SEP-53](/colibri/colibri-core/signer/message-signing.md) message signing. [SEP-1](/colibri/colibri-core/sep1.md) anchor URLs are advertisements; this package does not implement SEP-6/12/24/31/38 services. Existing Core [SEP-11](/colibri/colibri-core/asset/sep-11.md) asset helpers remain available through `@colibri/core/assets` without a redundant React hook for pure work. ## Lifetimes, errors and server rendering Use one config per application and separate configs per server request. [Queries and caching](/colibri/colibri-react/queries.md) explains network scopes, freshness, mutation retries and serialization. [Wallets and sessions](/colibri/colibri-react/wallets-and-sessions.md) explains authority changes, memory-only credentials and cleanup. Event subscriptions have their own [shared observer lifecycle](/colibri/colibri-react/hooks/use-contract-events.md). Connection SSR snapshots are disconnected and session SSR snapshots are anonymous. Render ordinary query/mutation error states and handle connection Promise rejections at the user-action boundary. React errors have dedicated subclasses, such as [`ReactNetworkMismatchError`](/colibri/colibri-react/convenience.md#handle-concrete-failures), within the [`ColibriReactError`](/colibri/colibri-react/convenience.md#handle-concrete-failures) family. Use `instanceof` or stable [React error codes](/colibri/reference/errors/react.md) for integration failures; existing Core and wallet errors retain their identity. ## Guides and API references * [Setup and providers](/colibri/colibri-react/setup.md) * [Common workflows](/colibri/colibri-react/convenience.md) * [Every React hook](/colibri/colibri-react/hooks.md) * [Queries and caching](/colibri/colibri-react/queries.md) * [Wallets and sessions](/colibri/colibri-react/wallets-and-sessions.md) * [Contract and pipeline recipes](/colibri/colibri-react/contracts-and-transactions.md) * [Browser imports and measurements](/colibri/getting-started/browser-bundles.md) * [All React API modules](https://jsr.io/@colibri/react/doc)