MultiversX UI library for Front-End dApps

MultiversX Front-End Library for JavaScript and TypeScript (written in TypeScript).

Introduction

sdk-dapp-ui is a library that holds components to display user information from the MultiversX blockchain.

Since the library is built using Stencil, it can be used in any front-end framework, such as React, Angular, or Solid.js, but also in back-end frameworks like Next.js.

GitHub project

The GitHub repository can be found here: https://github.com/multiversx/mx-sdk-dapp-ui

Live demo: template-dapp

See Template dApp for live demo or checkout usage in the Github repo

Check out existing components and states using Storybook.

Looking for another framework? The same dApp exists for Next.js, Vue, Angular, SolidJS, plain-JavaScript React, and React Native — see Other templates.

Requirements

• Node.js 20.19.0+ (CI runs Node 24)

Distribution

npm

Installation

The library can be installed via npm or yarn.

npm install @multiversx/sdk-dapp-ui

or

pnpm add @multiversx/sdk-dapp-ui

Usage

sdk-dapp-ui library is primarily designed to work with @multiversx/sdk-dapp, since components are designed to display data and emit user events, but do not hold any business logic.

The basic usage of the components would be importing the component and its corresponding interface and creating a wrapper for it in your application.

It outputs both web components (working out of the box) and React components (you need to create a wrapper for them).

React Components import

export { MvxCopyButton, MvxExplorerLink, MvxFormatAmount, MvxTransactionsTable } from '@multiversx/sdk-dapp-ui/react';

The library is divided into three main categories of components:

1. The ones that only display data (visual)
2. The ones that display data provided by a controller (controlled)
3. The ones that are designed for user interaction (functional)

1. Visual Components

Visual components are the most basic building blocks that handle pure presentation. They are controlled through props and don't contain any business logic. These components focus on consistent styling and user interface elements.

Components:

• Preloader (mvx-preloader): A loading indicator for asynchronous operations
• Tooltip (mvx-tooltip): Contextual information display with hover/click activation
• Pagination (mvx-pagination): Navigation controls for paginated content
• Copy Button (mvx-copy-button): Copies a value to the clipboard
• Explorer Link (mvx-explorer-link): Link to the MultiversX explorer
• Trim (mvx-trim): Middle-truncates text to the available width
• Address Table (mvx-address-table): Selectable, paginated list of derived addresses

Visual Component Example

export { getStore } from '@multiversx/sdk-dapp/out/store/store';
export type { ExplorerLink as ExplorerLinkSDKPropsType } from '@multiversx/sdk-dapp-ui/dist/types/components/visual/explorer-link/explorer-link.d.ts';
export { networkSelector } from '@multiversx/sdk-dapp/out/store/selectors/networkSelectors';
import { IPropsWithClass, IPropsWithChildren } from 'types';

interface ExplorerLinkPropsType extends Partial<ExplorerLinkSDKPropsType> {
  'page': string;
  'class'?: string;
  'data-testid'?: string;
  'children'?: JSX.Element;
}

export const ExplorerLink = ({
  children,
  page,
  'class': className,
  'data-testid': dataTestId,
  ...rest
}: ExplorerLinkPropsType) => {
  const store = getStore();
  const network = networkSelector(store.getState());
  return (
    <mvx-explorer-link link={`${network.explorerAddress}${page}`} class={className} data-testid={dataTestId} {...rest}>
      {children ? <div>{children}</div> : null}
    </mvx-explorer-link>
  );
};

2. Controlled Components

Controlled components are designed to display data that is processed by a controller. They receive formatted data through props and focus on consistent data presentation. These components are typically used in data-heavy sections of the application.

Components:

• Format Amount (mvx-format-amount): Numerical amount formatting with validation
• Transactions Table (mvx-transactions-table): Structured display of transaction data

Controlled Component Example

import { TransactionsTableController } from '@multiversx/sdk-dapp/out/controllers/TransactionsTableController';
import { accountSelector } from '@multiversx/sdk-dapp/out/store/selectors/accountSelectors';
import { networkSelector } from '@multiversx/sdk-dapp/out/store/selectors/networkSelectors';
import { getStore } from '@multiversx/sdk-dapp/out/store/store';

export const TransactionsTable = () => {
  const store = getStore();
  const network = networkSelector(store.getState());
  const account = accountSelector(store.getState());

  const data = await TransactionsTableController.processTransactions({
    address: account().address,
    egldLabel: network().egldLabel,
    explorerAddress: network().explorerAddress,
    transactions: props.transactions || [],
  });

  return <mvx-transactions-table transactions={data} />;
};

3. Functional Components

Functional components handle specific application functionality and business logic. They integrate with the application's event system and manage user interactions. These components are typically used in complex workflows like authentication and transaction signing.

Components:

• Sign Transactions Panel (mvx-sign-transactions-panel): Transaction signing workflow
• Notifications Feed (mvx-notifications-feed): Transaction notifications and history
• Wallet Connect (mvx-wallet-connect): Wallet connection flow
• Unlock Panel (mvx-unlock-panel): Wallet authentication
• Toast List (mvx-toast-list): Notification management
• Ledger Connect (mvx-ledger-connect): Hardware wallet connection
• Pending Transactions Panel (mvx-pending-transactions-panel): Pending transaction status

You can check out the way these components are used in @multiversx/sdk-dapp here.

Debugging your dApp

The recommended way to debug your application is by using lerna. Make sure you have the same package version in this package's package.json and in your project's package.json.

If you prefer to use npm link, make sure to use the preserveSymlinks option in the server configuration:

  resolve: {
    preserveSymlinks: true, // 👈
    alias: {
      src: "/src",
    },
  },

To build the library, run:

pnpm build

Development

pnpm install
pnpm start            # dev build, watch + serve
pnpm lint             # eslint src
pnpm build            # full production build
pnpm test             # spec + e2e tests
pnpm storybook-dev    # Storybook on http://localhost:6006

E2E tests run in a real browser and need a Chromium binary:

npx puppeteer browsers install chrome-headless-shell

To run a specific test file:

npx stencil test src/components/controlled/format-amount/tests/format-amount.spec.ts --spec

To run an individual test from a specific test file:

npx stencil test src/components/controlled/format-amount/tests/format-amount.spec.ts --spec -t 'renders correctly'

Use --e2e instead of --spec for .e2e.ts files.

Other templates

The same template dApp is implemented across several frameworks. If another stack suits your project better, start from one of these instead:

| Template | Stack | Repository | | ---------------------------------- | ------------------------------------ | -------------------------------------------------------------------------------------------- | | React (TypeScript) ← this repo | React 18 · TypeScript · Vite | mx-template-dapp | | React (JavaScript) | React 19 · JSX · Vite | mx-template-dapp-reactjs | | Next.js | Next.js 16 (App Router) · TypeScript | mx-template-dapp-nextjs | | SolidJS | SolidJS · TypeScript · Vite | mx-template-dapp-solidjs | | Vue | Vue 3 · TypeScript · Vite | mx-template-dapp-vue | | Angular | Angular 20 · TypeScript | mx-template-dapp-angular | | React Native | React Native | mx-template-dapp-react-native |

Links

• @multiversx/sdk-dapp on GitHub · on npm
• MultiversX developer docs

Contributor documentation — architecture, the Tailwind pipeline, conventions and verification steps — is in AGENTS.md.