UI Components

React frontend components to speed up your app development.

Mesh offers UI components you need to build your dApp, so you can jumpstart your next project and bring the user interface to life.

This page describes the list of easy-to-use UI components provided by Mesh to help you build applications faster.

Connect Wallet

In order for dApps to communicate with the user's wallet, we need a way to connect to their wallet.

Add this CardanoWallet to allow the user to select a wallet to connect to your dApp. After the wallet is connected, see Browser Wallet for a list of CIP-30 APIs.

For dark mode style, add isDark.

<CardanoWallet isDark={true} />
import { CardanoWallet } from '@meshsdk/react';

export default function Page() {
  return (
    <>
      <CardanoWallet isDark={false} />
    </>
  );
}

Stake ADA

Delegation is the process by which ADA holders delegate the stake associated with their ADA to a stake pool. It allows ADA holders to participate in the network and be rewarded in proportion to the amount of stake delegated.

Put this StakeButton on your website to allow anyone to delegate their ADA to your stake pool.

import { KoiosProvider } from '@meshsdk/core';
import { StakeButton } from '@meshsdk/react';

export default function Page() {
  // you can use any other providers here, e.g. BlockfrostProvider
  const blockchainProvider = new KoiosProvider('api');
  return (
    <StakeButton
      onCheck={(address) => blockchainProvider.fetchAccountInfo(address)}
      poolId="pool1mhww3q6d7qssj5j2add05r7cyr7znyswe2g6vd23anpx5sh6z8d"
    />
  )
}

Powered by Mesh Badge

If you love Mesh, here's a beautifully designed badge for you to embed in your application.

import { MeshBadge } from '@meshsdk/react';

export default function Page() {
  return (
    <>
      <MeshBadge dark={false} />
    </>
  );
}
Mesh