Broxus / React Modules

A React library of composed, self-contained modules that extend @broxus/react-uikit and @broxus/react-components. Each module encapsulates its own state management, data fetching, and UI — ready to be embedded as a standalone feature in any web application.

Table of Contents

• Installation
• Modules
• Customization
  • SCSS Entry Points
  • Selective Import
  • Overriding CSS Custom Properties
  • Hook Mixins

Installation

Install the package as project dependency

npm install @broxus/react-modules

yarn add @broxus/react-modules

pnpm add @broxus/react-modules

bun add @broxus/react-modules

Modules

| Module | Description | |---|---| | Network | Network selection and switching | | Notifications | Toast/notification system | | Pagination | Paginated data navigation | | TokensList | Token list with search, filtering, and virtual scroll | | TokensPrices | Token price data provider | | TvmTokensCache | TVM token metadata cache | | TvmTokensWallets | TVM token wallet balances | | TvmWalletsBalances | TVM wallet native balance tracking | | DexAccount | DEX account state management | | AccountMiddleware | Account connection guard / middleware | | AppConfig | Application configuration provider |

Customization

The SCSS system follows the same architecture as @broxus/react-uikit — see Customization for a detailed overview of the two-layer approach (SCSS variables + CSS custom properties), configurable imports, and hook mixins.

SCSS Entry Points

| Entry point | Purpose | |---|---| | @broxus/react-modules/styles/import | Main entry — outputs component styles with conditional token generation | | @broxus/react-modules/styles/tokens | Re-exports token mixins for selective inclusion |

Individual component styles are also available:

@use '@broxus/react-modules/styles/notifications';
@use '@broxus/react-modules/styles/pagination';

Selective Import

@use '@broxus/react-modules/styles/import' with (
    $components: (notifications: true, pagination: true),
);

Or include everything:

@use '@broxus/react-modules/styles/import' with (
    $components: (all: true),
);

Component map:

| Enabled by default | Disabled by default | |---|---| | notifications, pagination, tokens-list, wrong-network-alert | network-select |

Overriding CSS Custom Properties

Token mixins accept @content blocks:

@use '@broxus/react-modules/styles/tokens';

:root {
    @include tokens.notifications-tokens {
        --notifications-z-index: 2000;
    }
    @include tokens.pagination-tokens;
    @include tokens.tokens-list-tokens;
}

Hook Mixins

Register hook mixins via the $mixins map:

@use 'sass:meta';
@use 'mixins';

@use '@broxus/react-modules/styles/import' as * with (
    $components: (all: true),
    $mixins: (
        'hook-tokens-list-modal': meta.get-mixin('hook-tokens-list-modal', 'mixins'),
    ),
);