# @blocklet/ui-react
> Some useful front-end web components that can be used in Blocklets.
Latest version **3.5.4** (published 2026-06-13) · Apache-2.0 license · 0 weekly downloads
## Install
```sh
npm install @blocklet/ui-react
pnpm add @blocklet/ui-react
yarn add @blocklet/ui-react
bun add @blocklet/ui-react
```
## Health
**Score 60/100 (C)** — status: active.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads.
## Facts
| | |
|---|---|
| Version | 3.5.4 |
| Published | 2026-06-13 |
| First published | 2022-05-05 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 35 |
| Unpacked size | 731.3 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | wangshijun |
| Maintainers | wangshijun, gxw |
| Keywords | react, arcblock, component, blocklet |
## Links
- npm: https://www.npmjs.com/package/@blocklet/ui-react
- Repository: https://github.com/ArcBlock/ux
- Homepage: https://www.arcblock.io/docs/blocklet-ui-react
- Issues: https://github.com/ArcBlock/ux/issues
- npm.io page: https://npm.io/package/@blocklet/ui-react
## Dependencies (35)
- [ufo](https://npm.io/package/ufo.md) ^1.6.1
- [clsx](https://npm.io/package/clsx.md) ^2.1.1
- [axios](https://npm.io/package/axios.md) ^1.15.2
- [dayjs](https://npm.io/package/dayjs.md) ^1.11.13
- [p-all](https://npm.io/package/p-all.md) ^5.0.0
- [ahooks](https://npm.io/package/ahooks.md) ^3.8.5
- [is-url](https://npm.io/package/is-url.md) ^1.2.4
- [lodash](https://npm.io/package/lodash.md) ^4.18.1
- [p-queue](https://npm.io/package/p-queue.md) ^6.6.2
- [dompurify](https://npm.io/package/dompurify.md) ^3.4.1
- [js-cookie](https://npm.io/package/js-cookie.md) ^2.2.1
- [notistack](https://npm.io/package/notistack.md) ^2.0.8
- [type-fest](https://npm.io/package/type-fest.md) ^4.41.0
- [validator](https://npm.io/package/validator.md) ^13.15.35
- [p-wait-for](https://npm.io/package/p-wait-for.md) ^5.0.2
- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1
- [@arcblock/ws](https://npm.io/package/@arcblock/ws.md) ~1.30.24
- [iconify-icon](https://npm.io/package/iconify-icon.md) ^1.0.8
- [react-helmet](https://npm.io/package/react-helmet.md) ^6.1.0
- [ua-parser-js](https://npm.io/package/ua-parser-js.md) ^1.0.40
- [@abtnode/util](https://npm.io/package/@abtnode/util.md) ^1.17.12
- [@blocklet/sdk](https://npm.io/package/@blocklet/sdk.md) ^1.17.12
- [@iconify/react](https://npm.io/package/@iconify/react.md) ^5.2.1
- [@arcblock/icons](https://npm.io/package/@arcblock/icons.md) 3.5.4
- [@arcblock/bridge](https://npm.io/package/@arcblock/bridge.md) 3.5.4
- [@abtnode/constant](https://npm.io/package/@abtnode/constant.md) ^1.17.12
- [react-placeholder](https://npm.io/package/react-placeholder.md) ^4.1.0
- [@blocklet/uploader](https://npm.io/package/@blocklet/uploader.md) ^0.3.19
- [@iconify-icons/logos](https://npm.io/package/@iconify-icons/logos.md) ^1.2.36
- [react-error-boundary](https://npm.io/package/react-error-boundary.md) ^3.1.4
- [@arcblock/react-hooks](https://npm.io/package/@arcblock/react-hooks.md) 3.5.4
- [@iconify-icons/tabler](https://npm.io/package/@iconify-icons/tabler.md) ^1.2.95
- [@blocklet/did-space-react](https://npm.io/package/@blocklet/did-space-react.md) ^1.2.16
- [@iconify-icons/material-symbols](https://npm.io/package/@iconify-icons/material-symbols.md) ^1.2.58
- [iconify-icons-material-symbols-400](https://npm.io/package/iconify-icons-material-symbols-400.md) ^0.0.1
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 3.5.4 (latest) — 2026-06-13
- 3.5.3 — 2026-04-24
- 3.5.2 — 2026-02-10
- 3.5.1 — 2026-02-09
- 3.5.0 — 2026-02-03
- 3.4.15 — 2026-02-03
- 3.4.14 — 2026-01-29
- 3.4.13 — 2026-01-29
- 3.4.12 — 2026-01-27
- 3.4.11 — 2026-01-27
- 3.4.10 — 2026-01-23
- 3.4.9 — 2026-01-23
- 3.4.8 — 2026-01-16
- 3.4.7 — 2026-01-12
- 3.4.6 — 2026-01-09
- … 813 more at https://npm.io/package/@blocklet/ui-react/versions
## README
> Some useful React components that can be used in Blocklets.
## 安装
```sh
npm install @blocklet/ui-react
# or
yarn add @blocklet/ui-react
```
## 使用
### Header/Footer
```jsx
import Header from '@blocklet/ui-react/lib/Header';
import Footer from '@blocklet/ui-react/lib/Footer';
function App() {
return (
...
);
}
```
`` 或 `` 会获取 blocklet meta (`window.blocklet`) 中的配置信息, 包括 app logo, app name, navigation links 等，然后基于这些配置信息渲染一个 page header 或 page footer。
如果 `` 上层存在 Session Context Provider，那么 Header 组件会在右侧区域自动渲染一个用户身份信息的按钮 (SessionManager)。
类似的，如果 `` 上层存在 Locale Context Provider，那么 Header 组件会在右侧区域自动渲染一个语言选择器按钮 (LocaleSelector)。
也可以显式地传入 blocklet meta:
```jsx
const blockletMeta = {
appName: 'Blocklet Name',
appLogo: 'logo url',
theme: {
background: '#cfefe8',
},
navigation: [
{
title: 'Home',
link: '/',
},
...
],
};
function App() {
return (
...
);
}
```
定制 Header 右侧 addons 区域:
```jsx
{
return [
,
,
...addons,
];
}}
/>
```
---
_Source: https://npm.io/package/@blocklet/ui-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._