@broxus/react-components

Broxus / React Components

A React component library that extends @broxus/react-uikit with higher-level, composite components for building web application interfaces.

Table of Contents

• Installation
• Components
  • Token & Pool
  • Data Entry
  • Data Display
  • Charts
  • Utility
• Customization
  • SCSS Entry Points
  • Selective Import
  • Overriding CSS Custom Properties
  • Hook Mixins

Installation

Install the package as project dependency

npm install @broxus/react-components

yarn add @broxus/react-components

pnpm add @broxus/react-components

bun add @broxus/react-components

Components

Token & Pool

Components for displaying and selecting tokens and liquidity pools.

Component	Description
TokenIcon	Token logo image with fallback
TokenBadge	Token name/symbol badge with icon
TokenAmountBadge	Token amount display with icon and formatting
TokenSelect	Token selection dropdown
TokenSelector	Full token selector with search
TokensList	Scrollable list of tokens
TokenAmountInput	Input for token amounts with token selection
PoolSelect	Liquidity pool selector
PoolTokensBadge	Overlapping token icons for a pool

Data Entry

Specialized input and control components.

Component	Description
AmountInput	Numeric amount input with max button and formatting
ComposedControl	Input with attached label or action (e.g. input + button)
OrderingSwitcher	Column sort direction toggle
TimeframeSwitcher	Timeframe period selector (1D, 1W, 1M, etc.)

Data Display

Components for presenting formatted data and metrics.

Component	Description
FormattedTokenAmount	Formatted token amount with decimals and abbreviation
FormattedCurrencyValue	Formatted fiat currency value
QuotationRate	Exchange rate display
QuotationsDelta	Price change indicator with color (positive/negative)
Stats	Key-value statistics block
Descriptions	Labeled description list
Skeleton	Content placeholder during loading
ContentLoader	SVG-based animated content placeholder
Copy	Copy-to-clipboard button with tooltip
Datetime	Formatted date/time display
RelativeTime	Relative time label (e.g. "5 min ago")
EcosystemLink	External link with ecosystem icon

Charts

Data visualization components.

Component	Description
Chart	Line/area chart
PieChart	Pie/donut chart with tooltip

Utility

Low-level and helper components.

Component	Description
NativeScrollArea	Custom-styled native scrollbar container
WalletAccount	Wallet address display with icon and truncation
AccountIcon	Generated avatar icon for an address
IconsSet	SVG icon sprite definitions
Icon	Icon reference from the sprite
Close	Close button
Leader	Dot leader line between two elements
AddAsset	Button to add a token to wallet
EmptyListPicture	Empty state illustration
Noop	No-op render component

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-components/styles/import	Main entry — outputs component styles with conditional token generation
@broxus/react-components/styles/tokens	Re-exports token mixins for selective inclusion

Individual component styles are also available:

@use '@broxus/react-components/styles/skeleton';
@use '@broxus/react-components/styles/chart';

Selective Import

@use '@broxus/react-components/styles/import' with (
    $components: (skeleton: true, chart: true, token-icon: true),
);

Or include everything:

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

Component map:

Enabled by default	Disabled by default
amount-input, composed-control, copy, explorer-links, ordering-switcher, icons-set, pool-tokens-badge, quotation-delta, quotation-rate, skeleton, stats, token-amount-badge, token-amount-input, token-badge, token-icon, token-selector, tokens-list, wallet-account	chart, content-loader, descriptions, formatted-currency-value, formatted-token-amount, native-scroll-area, pie-chart, pool-select, token-select

Overriding CSS Custom Properties

Token mixins accept @content blocks:

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

:root {
    @include tokens.skeleton-tokens {
        --skeleton-background: rgba(255, 255, 255, 8%);
    }
    @include tokens.stats-tokens;
    @include tokens.token-icon-tokens;
}

Hook Mixins

Register hook mixins via the $mixins map:

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

@use '@broxus/react-components/styles/import' as * with (
    $components: (all: true),
    $mixins: (
        'hook-composed-control': meta.get-mixin('hook-composed-control', 'mixins'),
        'hook-stats': meta.get-mixin('hook-stats', 'mixins'),
    ),
);