React Components Overview

@oviato/connect/client is where the React-specific surface lives — a provider for session state, hooks for accessing it, and pre-built UI components you can drop into your app.

import {
  OviConnectProvider,
  useOviConnect,
  ConnectButton,
  Connect,
} from '@oviato/connect/client';

Everything else — chain-agnostic actions, evm.*, utxo.*, RPC — lives at the main @oviato/connect entry point (which re-exports @oviato/sdk). The /client subpath is strictly for React code.

The two-import pattern

A normal Oviato React app imports from two places:

// Actions (works anywhere — just called from React)
import { sendTransfer, signMessage, evm, utxo } from '@oviato/connect';

// React-only: provider, hooks, components
import { OviConnectProvider, useOviConnect, ConnectButton } from '@oviato/connect/client';

The split keeps your bundle clean — server components and non-React code paths don't pull in React.

What's in here

Provider

Wraps your app to initialize the SDK + expose session state to hooks. One per tree.

<OviConnectProvider appId="your-app-id" theme="auto">
  {children}
</OviConnectProvider>

Config: appId, theme, dns, type, domain. See Provider.

Hooks

useOviConnect() — the primary hook. Gives you session, isLoading, disconnect, plus signMessage / sendTransfer / switchNetwork as callbacks.

useOviStore() — direct access to the Zustand store for advanced state subscriptions.

See Hooks.

Components

<Connect /> — full auth form (username input + passkey flow). Good for dedicated sign-in pages.

<ConnectButton /> — one-click auth button. Good for headers, modals.

Both are styled + theme-aware out of the box. See Components.

SSR-safe

Everything in this section is compatible with Next.js App Router, Pages Router, and other SSR frameworks:

• Provider mounts client-side only (no hydration flash)
• Hooks guard against useEffect-less server renders
• Components handle 'use client' boundaries cleanly

See the Quickstart for the exact provider placement pattern.

CSS

The React components ship with their own stylesheet. Import once at the app root:

import '@oviato/connect/client.css';

Or import the full styles (includes modal, button, overlays):

import '@oviato/connect/styles.css';

Both are scoped with a CSS-layer prefix so they don't collide with your Tailwind / shadcn / MUI.

Theme

The provider accepts theme: 'light' | 'dark' | 'auto'. 'auto' respects prefers-color-scheme. Override via the dashboard for per-app branding (accent color, logo).

Explore