What React components does Mesh provide for Cardano?

Mesh provides CardanoWallet for wallet connection, useWallet hook for state management, useAssets for token display, useLovelace for ADA balance, and useAddress for address handling. These components cover the most common Cardano dApp requirements.

Are Mesh React components customizable?

Yes, Mesh components accept styling props and can be customized through CSS. For complete control, you can build custom components using Mesh's hooks and utilities while maintaining full functionality.

Do Mesh React components work with Next.js?

Mesh React components work with Next.js, Create React App, Vite, and other React frameworks. For Next.js, ensure MeshProvider is added to your client-side layout component.

What is MeshProvider and why is it needed?

MeshProvider is a React context provider that manages wallet state across your application. It enables hooks like useWallet to access wallet data anywhere in your component tree without prop drilling.

Can I use Mesh components with Svelte or Vue?

Mesh provides dedicated packages for Svelte (@meshsdk/svelte). For Vue and other frameworks, use @meshsdk/core directly with your framework's state management. The core APIs work in any JavaScript environment.

Ready-to-Use Cardano React Components

Ship faster with production-ready Cardano React components. Mesh provides wallet connectors, transaction UIs, and blockchain data displays that work out of the box with full TypeScript support.

Mesh React components eliminate weeks of UI development for Cardano dApps. Instead of building wallet connectors, balance displays, and transaction interfaces from scratch, you use production-tested components that handle edge cases, accessibility, and wallet variations automatically. Focus on your dApp's unique features while Mesh handles the blockchain UI complexity.

Quick Start

Add Cardano components to your React application in minutes:

Step 1: Install the React package

npm install @meshsdk/react

Step 2: Add the provider

import { MeshProvider } from "@meshsdk/react";

function App() {
  return (
    <MeshProvider>
      <YourApp />
    </MeshProvider>
  );
}

Step 3: Use components and hooks

import { CardanoWallet, useWallet, useLovelace } from "@meshsdk/react";

function Dashboard() {
  const { connected } = useWallet();
  const lovelace = useLovelace();

  return (
    <div>
      <CardanoWallet />
      {connected && <p>Balance: {Number(lovelace) / 1_000_000} ADA</p>}
    </div>
  );
}

Features

Mesh React provides a comprehensive component library for Cardano dApps:

CardanoWallet: Complete wallet connection UI with multi-wallet support
useWallet Hook: Reactive wallet state and connection management
useAssets Hook: Access connected wallet's native tokens and NFTs
useLovelace Hook: Get wallet ADA balance with automatic updates
useAddress Hook: Access connected wallet addresses
useNetwork Hook: Detect connected network (mainnet/testnet)
MeshProvider: Context provider for wallet state management
TypeScript Types: Full type definitions for all components and hooks

Component Reference

CardanoWallet

The primary wallet connection component:

import { CardanoWallet } from "@meshsdk/react";

// Basic usage
<CardanoWallet />

// With customization
<CardanoWallet
  label="Connect Wallet"
  onConnected={() => console.log("Connected!")}
  isDark={true}
/>

CardanoWallet provides:

Automatic wallet detection
Wallet selection dropdown
Connection state management
Connected address display
Disconnect functionality

useWallet Hook

Access wallet state anywhere in your app:

import { useWallet } from "@meshsdk/react";

function WalletInfo() {
  const {
    connected,      // boolean
    connecting,     // boolean
    wallet,         // wallet instance
    name,           // wallet name
    connect,        // (walletId: string) => Promise<void>
    disconnect,     // () => void
  } = useWallet();

  return (
    <div>
      {connected ? (
        <p>Connected to {name}</p>
      ) : (
        <button onClick={() => connect("eternl")}>Connect</button>
      )}
    </div>
  );
}

useLovelace Hook

Get the wallet's ADA balance:

import { useLovelace } from "@meshsdk/react";

function Balance() {
  const lovelace = useLovelace();

  if (!lovelace) return null;

  const ada = Number(lovelace) / 1_000_000;
  return <p>{ada.toFixed(2)} ADA</p>;
}

useAssets Hook

Access native tokens and NFTs:

import { useAssets } from "@meshsdk/react";

function TokenList() {
  const assets = useAssets();

  if (!assets) return <p>Loading assets...</p>;

  return (
    <ul>
      {assets.map((asset) => (
        <li key={asset.unit}>
          {asset.assetName}: {asset.quantity}
        </li>
      ))}
    </ul>
  );
}

useAddress Hook

Access wallet addresses:

import { useAddress } from "@meshsdk/react";

function AddressDisplay() {
  const address = useAddress();

  if (!address) return null;

  return (
    <p title={address}>
      {address.slice(0, 8)}...{address.slice(-8)}
    </p>
  );
}

useNetwork Hook

Detect the connected network:

import { useNetwork } from "@meshsdk/react";

function NetworkBadge() {
  const network = useNetwork();

  return (
    <span className={network === 1 ? "mainnet" : "testnet"}>
      {network === 1 ? "Mainnet" : "Testnet"}
    </span>
  );
}

Building Custom Components

Mesh hooks enable fully custom UIs while retaining all functionality:

import { BrowserWallet } from "@meshsdk/core";
import { useWallet, useLovelace, useAssets } from "@meshsdk/react";

function CustomWalletPanel() {
  const { connected, wallet, connect, disconnect } = useWallet();
  const lovelace = useLovelace();
  const assets = useAssets();

  if (!connected) {
    const wallets = BrowserWallet.getInstalledWallets();

    return (
      <div className="wallet-selector">
        <h3>Select Wallet</h3>
        {wallets.map(w => (
          <button key={w.id} onClick={() => connect(w.id)}>
            <img src={w.icon} alt="" width={24} height={24} />
            {w.name}
          </button>
        ))}
      </div>
    );
  }

  return (
    <div className="wallet-panel">
      <div className="balance">
        <span>{(Number(lovelace) / 1_000_000).toFixed(2)}</span>
        <span>ADA</span>
      </div>
      <div className="assets">
        {assets?.length} tokens
      </div>
      <button onClick={disconnect}>Disconnect</button>
    </div>
  );
}

Why Mesh React Components

Save Development Time

Building wallet UIs from scratch requires handling wallet detection, connection flows, state management, error handling, and cross-wallet compatibility. Mesh components encapsulate weeks of development in ready-to-use packages.

Production Tested

Mesh components power major Cardano dApps. Edge cases, accessibility concerns, and wallet quirks have been discovered and fixed through real-world usage.

Consistent User Experience

Users expect consistent wallet interactions across dApps. Mesh components follow established patterns that users recognize, reducing friction in your application.

TypeScript First

Full type definitions ensure compile-time safety and enable powerful IDE autocompletion. Catch errors before runtime and explore APIs through IntelliSense.

Customizable

Start with ready-made components for speed, then customize or replace them as your design requirements evolve. Mesh's layered architecture supports both approaches.

Framework Compatibility

Next.js Setup

For Next.js applications, add MeshProvider to your layout:

// app/layout.tsx or _app.tsx
"use client";

import { MeshProvider } from "@meshsdk/react";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <MeshProvider>{children}</MeshProvider>
      </body>
    </html>
  );
}

Vite/Create React App

Standard React setup works without additional configuration:

// main.tsx
import { MeshProvider } from "@meshsdk/react";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
  <MeshProvider>
    <App />
  </MeshProvider>
);

Styling Components

Mesh components accept className props for styling:

<CardanoWallet
  className="custom-wallet-button"
/>

For complete control, use hooks to build custom-styled components as shown in the "Building Custom Components" section.

Wallet Integration: Deep dive into wallet connection patterns
Transaction Builder: Build transactions with connected wallets
React Documentation: Complete API reference for React components
Wallet Challenges: Understanding wallet integration complexity

Get Started

Add production-ready Cardano components to your React application:

npm install @meshsdk/react

Mesh React components let you focus on building great dApp experiences while the SDK handles blockchain UI complexity. Start with the ready-made CardanoWallet or build fully custom interfaces using Mesh hooks.

Ready-to-Use Cardano React Components

On this page