Documentation

Wallet-aware UI for Avalanche apps

AvaCloud UI Kit gives you composable primitives, chain-aware widgets, and a scoped theming system so you can ship production-ready crypto interfaces without rebuilding the same wallet and balance flows from scratch.

React + AvaCloudScoped themingLive component demos

Rendering model

Scoped, drop-in UI

Wrap only the subtree that needs AvaCloud Kit components.

Data layer

AvaCloud-powered

Use built-in hooks for chains, balances, tokens, NFTs, and activity.

Best fit

Wallet-connected apps

Designed for chain selection, balances, transfers, wallet state, and privacy flows.

Start integration

Install the package, wire providers, and render your first wallet-aware widget.

Customize the look

Use ThemeProvider to scope dark mode, palettes, radii, and portal behavior.

Browse the library

Explore inputs, wallet surfaces, balances, activity views, and eERC flows.

What ships in the kit

Inputs and selectors

AddressInput, ChainSelect, TokenSelector, and amount entry flows tuned for blockchain UX.

Wallet connection

Connect wallet buttons, connected wallet surfaces, and connection/network gates.

Balances and activity

Token balances, NFT surfaces, QR payments, transaction history, and richer portfolio UI.

Privacy flows

Use the eERC entrypoint for encrypted balances, transfers, and converter-based flows.

Reference examples

PrivatePay

See how wallet, checkout, and privacy-oriented payment flows come together in a full reference app.

Install @avalabs/avacloud-kit-ui-preview and import the shared stylesheet once.

Wrap the UI subtree with ThemeProvider and AvaCloudKitProvider.

Render a component like ChainSelect, AddressInput, or ConnectedWallet.

Tailwind is optional

The kit ships its own scoped utility stylesheet. Consumer apps do not need Tailwind to render AvaCloud Kit components correctly.

Reference integration shape

providers.tsx

page.tsx

globals.css

app/providers.tsx

import type { ReactNode } from 'react';
import {
  AvaCloudKitProvider,
  C_CHAIN_INFO_MAINNET,
  C_CHAIN_INFO_TESTNET,
  ThemeProvider,
} from '@avalabs/avacloud-kit-ui-preview';

export function AppProviders({ children }: { children: ReactNode }) {
  return (
    <ThemeProvider>
      <AvaCloudKitProvider
        value={{
          chains: [C_CHAIN_INFO_MAINNET, C_CHAIN_INFO_TESTNET],
        }}
      >
        {children}
      </AvaCloudKitProvider>
    </ThemeProvider>
  );
}