# @lidofinance/ui-primitives

> UI primitives (client-side: components, constants, hooks)

Latest version **0.64.0** (published 2026-09-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @lidofinance/ui-primitives
pnpm add @lidofinance/ui-primitives
yarn add @lidofinance/ui-primitives
bun add @lidofinance/ui-primitives
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.64.0 |
| Published | 2026-09-01 |
| First published | 2023-05-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 16 |
| Dependencies | 0 |
| Unpacked size | 40.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | lidofinance-group, lidofinance-ui |

## Links

- npm: https://www.npmjs.com/package/@lidofinance/ui-primitives
- Repository: https://github.com/lidofinance/warehouse
- Homepage: https://github.com/lidofinance/warehouse/tree/main/packages/ui/primitives
- Issues: https://github.com/lidofinance/warehouse/issues
- npm.io page: https://npm.io/package/@lidofinance/ui-primitives

## Recent versions

- 0.64.0 (latest) — 2026-09-01
- 0.63.0 — 2026-08-12
- 0.62.0 — 2026-08-05
- 0.61.0 — 2026-07-22
- 0.60.0 — 2026-07-15
- 0.59.0 — 2026-05-05
- 0.58.0 — 2026-03-31
- 0.57.0 — 2026-03-27
- 0.56.0 — 2025-10-22
- 0.55.0 — 2025-10-20
- 0.54.1 — 2025-08-20
- 0.52.0 — 2025-07-10
- 0.51.0 — 2025-03-06
- 0.50.0 — 2025-03-05
- 0.49.0 — 2025-02-14
- … 29 more at https://npm.io/package/@lidofinance/ui-primitives/versions

## README

# @lidofinance/ui-primitives

Widget UI primitives: components, hooks.

This component abstracted from the blockchain network,
other words you can use it for any widgets for any blockchains.

## Installation

* React 17 || 18

```bash
yarn add @lidofinance/ui-primitives

# and additional
yarn add next@^12.3.0 styled-components@^5.3.5 @lidofinance/lido-ui@^3.6.1
```

## Using

### Wallet components

You can make wallet components (like in image below) via `@lidofinance/ui-primitives` package.

<img width="500" src="./../../../.github/assets/ui-primitives/wallet.png">
<img width="500" src="./../../../.github/assets/ui-primitives/walletFallback.png">

#### Example based on Eth:

The design you can find on Figma https://www.figma.com/file/pmtFrBp0z1RvzdfcHaV2fn/Widget-UI-Guide?node-id=2-3256&t=VZj5YPwLffneQwE1-0

```tsx
// `useWeb3` and other imports what is out of context here
import {
  WalletCard,
  WalletCardRow,
  WalletCardBalance,
  WalletCardAccount,
  WalletFallback,
} from '@lidofinance/ui-primitives'
import { Divider } from '@lidofinance/lido-ui'

const EthWalletCard: EthWalletCardComponent = (props) => {
  // `account`, `openModal` and other what is out of context here

  return (
    <WalletCard {...props}>
      <WalletCardRow>
        <WalletCardBalance
          title="Eth balance"
          loading={false}
          value={'100.00 ETH'}
          extra={'Extra content here'}
        >Children content here</WalletCardBalance>
        <WalletCardAccount account={account} onClickCb={openModal} />
      </WalletCardRow>
      <Divider />
      <WalletCardRow>
        <WalletCardBalance
          small
          title="Token balance"
          loading={false}
          value={'1000.00 stETH'}
          extra={'Extra content here'}
        >Children content here</WalletCardBalance>
        <WalletCardBalance
          small
          title="Token balance"
          loading={false}
          value={'1000.00 wstETH'}
          extra={'Extra content here'}
        >Children content here</WalletCardBalance>
      </WalletCardRow>
    </WalletCard>
  )
}

const EthWalletCardWrapper: EthWalletCardComponent = (props) => {
  const { active } = useWeb3()
  return active ? <EthWalletCard {...props} /> : <WalletFallback {...props} />
}

export default EthWalletCardWrapper
```

---
_Source: https://npm.io/package/@lidofinance/ui-primitives · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._