# uiw > A high quality UI Toolkit, A Component Library for React 16+. Latest version **4.22.3** (published 2023-11-29) · MIT license · 0 weekly downloads ## Install ```sh npm install uiw pnpm add uiw yarn add uiw bun add uiw ``` ## Health **Score 40/100 (D)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; has provenance. Warnings: low downloads. Negative: abandoned. ## Facts | | | |---|---| | Version | 4.22.3 | | Published | 2023-11-29 | | First published | 2017-05-21 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 65 | | Unpacked size | 1.4 MB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 740 | | Author | Kenny Wong | | Maintainers | wcjiang, uiwjs | | Keywords | design, uiw, uiw-react, react.js, react, react-component, component, components, ui, css, uikit, react-ui, framework, front-end, frontend | ## Links - npm: https://www.npmjs.com/package/uiw - Repository: https://github.com/uiwjs/uiw - Homepage: https://uiwjs.github.io - Issues: https://github.com/uiwjs/uiw/issues - Funding: https://jaywcjlove.github.io/#/sponsor - npm.io page: https://npm.io/package/uiw ## Dependencies (65) - [@types/react](https://npm.io/package/@types/react.md) ~18.2.0 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ~7.23.0 - [@uiw/formatter](https://npm.io/package/@uiw/formatter.md) ~2.0.0 - [@uiw/react-tag](https://npm.io/package/@uiw/react-tag.md) ^4.22.3 - [@uiw/react-card](https://npm.io/package/@uiw/react-card.md) ^4.22.3 - [@uiw/react-form](https://npm.io/package/@uiw/react-form.md) ^4.22.3 - [@uiw/react-grid](https://npm.io/package/@uiw/react-grid.md) ^4.22.3 - [@uiw/react-icon](https://npm.io/package/@uiw/react-icon.md) ^4.22.3 - [@uiw/react-list](https://npm.io/package/@uiw/react-list.md) ^4.22.3 - [@uiw/react-menu](https://npm.io/package/@uiw/react-menu.md) ^4.22.3 - [@uiw/react-rate](https://npm.io/package/@uiw/react-rate.md) ^4.22.3 - [@uiw/react-tabs](https://npm.io/package/@uiw/react-tabs.md) ^4.22.3 - [@uiw/react-tree](https://npm.io/package/@uiw/react-tree.md) ^4.22.3 - [@types/react-dom](https://npm.io/package/@types/react-dom.md) ~18.2.0 - [@uiw/react-affix](https://npm.io/package/@uiw/react-affix.md) ^4.22.3 - [@uiw/react-alert](https://npm.io/package/@uiw/react-alert.md) ^4.22.3 - [@uiw/react-badge](https://npm.io/package/@uiw/react-badge.md) ^4.22.3 - [@uiw/react-empty](https://npm.io/package/@uiw/react-empty.md) ^4.22.3 - [@uiw/react-input](https://npm.io/package/@uiw/react-input.md) ^4.22.3 - [@uiw/react-modal](https://npm.io/package/@uiw/react-modal.md) ^4.22.3 - [@uiw/react-radio](https://npm.io/package/@uiw/react-radio.md) ^4.22.3 - [@uiw/react-split](https://npm.io/package/@uiw/react-split.md) ~5.9.0 - [@uiw/react-steps](https://npm.io/package/@uiw/react-steps.md) ^4.22.3 - [@uiw/react-table](https://npm.io/package/@uiw/react-table.md) ^4.22.3 - [@uiw/react-avatar](https://npm.io/package/@uiw/react-avatar.md) ^4.22.3 - [@uiw/react-button](https://npm.io/package/@uiw/react-button.md) ^4.22.3 - [@uiw/react-drawer](https://npm.io/package/@uiw/react-drawer.md) ^4.22.3 - [@uiw/react-layout](https://npm.io/package/@uiw/react-layout.md) ~4.10.0 - [@uiw/react-loader](https://npm.io/package/@uiw/react-loader.md) ^4.22.3 - [@uiw/react-notify](https://npm.io/package/@uiw/react-notify.md) ^4.22.3 - [@uiw/react-portal](https://npm.io/package/@uiw/react-portal.md) ^4.22.3 - [@uiw/react-select](https://npm.io/package/@uiw/react-select.md) ^4.22.3 - [@uiw/react-slider](https://npm.io/package/@uiw/react-slider.md) ^4.22.3 - [@uiw/react-switch](https://npm.io/package/@uiw/react-switch.md) ^4.22.3 - [@uiw/react-divider](https://npm.io/package/@uiw/react-divider.md) ^4.22.3 - [@uiw/react-message](https://npm.io/package/@uiw/react-message.md) ^4.22.3 - [@uiw/react-overlay](https://npm.io/package/@uiw/react-overlay.md) ^4.22.3 - [@uiw/react-popover](https://npm.io/package/@uiw/react-popover.md) ^4.22.3 - [@uiw/react-tooltip](https://npm.io/package/@uiw/react-tooltip.md) ^4.22.3 - [@uiw/react-back-top](https://npm.io/package/@uiw/react-back-top.md) ^4.22.3 - [@uiw/react-calendar](https://npm.io/package/@uiw/react-calendar.md) ^4.22.3 - [@uiw/react-carousel](https://npm.io/package/@uiw/react-carousel.md) ^4.22.3 - [@uiw/react-cascader](https://npm.io/package/@uiw/react-cascader.md) ^4.22.3 - [@uiw/react-checkbox](https://npm.io/package/@uiw/react-checkbox.md) ^4.22.3 - [@uiw/react-collapse](https://npm.io/package/@uiw/react-collapse.md) ^4.22.3 - [@uiw/react-dropdown](https://npm.io/package/@uiw/react-dropdown.md) ^4.22.3 - [@uiw/react-pin-code](https://npm.io/package/@uiw/react-pin-code.md) ^4.22.3 - [@uiw/react-progress](https://npm.io/package/@uiw/react-progress.md) ^4.22.3 - [@uiw/react-textarea](https://npm.io/package/@uiw/react-textarea.md) ^4.22.3 - [@uiw/react-transfer](https://npm.io/package/@uiw/react-transfer.md) ^4.22.3 - [@uiw/react-auto-link](https://npm.io/package/@uiw/react-auto-link.md) ^4.22.3 - [@uiw/react-breadcrumb](https://npm.io/package/@uiw/react-breadcrumb.md) ^4.22.3 - [@uiw/react-date-input](https://npm.io/package/@uiw/react-date-input.md) ^4.22.3 - [@uiw/react-file-input](https://npm.io/package/@uiw/react-file-input.md) ^4.22.3 - [@uiw/react-pagination](https://npm.io/package/@uiw/react-pagination.md) ^4.22.3 - [@uiw/react-date-picker](https://npm.io/package/@uiw/react-date-picker.md) ^4.22.3 - [@uiw/react-search-tree](https://npm.io/package/@uiw/react-search-tree.md) ^4.22.3 - [@uiw/react-time-picker](https://npm.io/package/@uiw/react-time-picker.md) ^4.22.3 - [@uiw/react-button-group](https://npm.io/package/@uiw/react-button-group.md) ^4.22.3 - [@uiw/react-descriptions](https://npm.io/package/@uiw/react-descriptions.md) ^4.22.3 - [@uiw/react-month-picker](https://npm.io/package/@uiw/react-month-picker.md) ^4.22.3 - [@uiw/react-tree-checked](https://npm.io/package/@uiw/react-tree-checked.md) ^4.22.3 - [@uiw/react-search-select](https://npm.io/package/@uiw/react-search-select.md) ^4.22.3 - [@uiw/react-overlay-trigger](https://npm.io/package/@uiw/react-overlay-trigger.md) ^4.22.3 - [@uiw/react-copy-to-clipboard](https://npm.io/package/@uiw/react-copy-to-clipboard.md) ^4.22.3 ## Alternatives - [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads - [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads - [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads - [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads - [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads ## Recent versions - 4.22.3 (latest) — 2023-11-29 - 5.0.0-bate.2.1 (bate) — 2023-03-10 - 4.22.2 — 2023-11-09 - 4.22.1 — 2023-11-08 - 4.22.0 — 2023-09-19 - 4.21.28 — 2023-05-05 - 4.21.27 — 2023-04-21 - 4.21.26 — 2023-04-20 - 4.21.25 — 2023-03-14 - 4.21.24 — 2023-03-08 - 5.0.0-bate.2.0 — 2023-03-02 - 4.21.23 — 2022-12-21 - 4.21.22 — 2022-12-19 - 4.21.21 — 2022-12-19 - 5.0.0-bate-19 — 2022-12-12 - … 465 more at https://npm.io/package/uiw/versions ## README

uiw LOGO

Buy me a coffee Github Actions License MIT jest Open in Gitpod
Github Releases npm version Github Stars

uiw document website

## uiw The official documentation site for [`uiw`](https://github.com/uiwjs/uiw). A high quality UI Toolkit, A Component Library for React 16+. 💘 ### Installation ```bash npm install uiw --save ``` You can use [`kkt`](https://github.com/kktjs/kkt) to quickly create a react + uiw project. ```bash npx create-kkt my-app -e uiw ``` You can use the [`uiw v1.x`](https://github.com/uiwjs/uiw/tree/v1) version. [Please see here for instructions](https://github.com/uiwjs/uiw/tree/v1). ([**npx**](https://github.com/npm/npm/releases/tag/v5.2.0) comes with npm `5.2+` and higher.) ### Basic Usage ```js import React from "react"; import ReactDOM from "react-dom"; import { Button } from "uiw"; ReactDOM.render( , document.getElementById("app") ); ``` ### Documentation Visit the [uiwjs.github.io](https://uiwjs.github.io) website for more information. Or Open in VSCode Preview : [![Open in VSCode](https://jaywcjlove.github.io/sb/open/open-in-vscode.svg)](https://marketplace.visualstudio.com/items?itemName=uiw.uiw) ### Packages This git repository is a repo built using [Lerna](https://github.com/lerna/lerna). It contains several packages: Package | Downloads | Version | Description ----- | ----- | ----- | ----- [`uiw`](/packages/uiw) | [![npm downloads](https://badgen.net/npm/dw/uiw?label=npm&color=dd4e4c)](https://www.npmjs.com/package/uiw) | [![npm version](https://img.shields.io/npm/v/uiw.svg?maxAge=3600)](https://www.npmjs.com/package/uiw) | - [`@uiw/react-affix`](/packages/react-affix) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-affix?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-affix) | [![npm version](https://img.shields.io/npm/v/@uiw/react-affix.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-affix) | - [`@uiw/react-alert`](/packages/react-alert) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-alert?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-alert) | [![npm version](https://img.shields.io/npm/v/@uiw/react-alert.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-alert) | - [`@uiw/react-avatar`](/packages/react-avatar) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-avatar?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-avatar) | [![npm version](https://img.shields.io/npm/v/@uiw/react-avatar.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-avatar) | - [`@uiw/react-back-top`](/packages/react-back-top) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-back-top?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-back-top) | [![npm version](https://img.shields.io/npm/v/@uiw/react-back-top.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-back-top) | - [`@uiw/react-badge`](/packages/react-badge) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-badge?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-badge) | [![npm version](https://img.shields.io/npm/v/@uiw/react-badge.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-badge) | - [`@uiw/react-breadcrumb`](/packages/react-breadcrumb) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-breadcrumb?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-breadcrumb) | [![npm version](https://img.shields.io/npm/v/@uiw/react-breadcrumb.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-breadcrumb) | - [`@uiw/react-button`](/packages/react-button) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-button?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-button) | [![npm version](https://img.shields.io/npm/v/@uiw/react-button.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-button) | - [`@uiw/react-button-group`](/packages/react-button-group) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-button-group?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-button-group) | [![npm version](https://img.shields.io/npm/v/@uiw/react-button-group.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-button-group) | - [`@uiw/react-calendar`](/packages/react-calendar) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-calendar?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-calendar) | [![npm version](https://img.shields.io/npm/v/@uiw/react-calendar.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-calendar) | - [`@uiw/react-card`](/packages/react-card) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-card?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-card) | [![npm version](https://img.shields.io/npm/v/@uiw/react-card.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-card) | - [`@uiw/react-checkbox`](/packages/react-checkbox) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-checkbox?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-checkbox) | [![npm version](https://img.shields.io/npm/v/@uiw/react-checkbox.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-checkbox) | - [`@uiw/react-collapse`](/packages/react-collapse) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-collapse?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-collapse) | [![npm version](https://img.shields.io/npm/v/@uiw/react-collapse.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-collapse) | - [`@uiw/react-copy-to-clipboard`](/packages/react-copy-to-clipboard) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-copy-to-clipboard?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-copy-to-clipboard) | [![npm version](https://img.shields.io/npm/v/@uiw/react-copy-to-clipboard.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-copy-to-clipboard) | - [`@uiw/react-date-input`](/packages/react-date-input) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-date-input?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-date-input) | [![npm version](https://img.shields.io/npm/v/@uiw/react-date-input.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-date-input) | - [`@uiw/react-date-picker`](/packages/react-date-picker) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-date-picker?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-date-picker) | [![npm version](https://img.shields.io/npm/v/@uiw/react-date-picker.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-date-picker) | - [`@uiw/react-descriptions`](/packages/react-descriptions) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-descriptions?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-descriptions) | [![npm version](https://img.shields.io/npm/v/@uiw/react-descriptions.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-descriptions) | - [`@uiw/react-divider`](/packages/react-divider) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-divider?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-divider) | [![npm version](https://img.shields.io/npm/v/@uiw/react-divider.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-divider) | - [`@uiw/react-drawer`](/packages/react-drawer) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-drawer?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-drawer) | [![npm version](https://img.shields.io/npm/v/@uiw/react-drawer.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-drawer) | - [`@uiw/react-dropdown`](/packages/react-dropdown) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-dropdown?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-dropdown) | [![npm version](https://img.shields.io/npm/v/@uiw/react-dropdown.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-dropdown) [`@uiw/react-empty`](/packages/react-empty) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-empty?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-empty) | [![npm version](https://img.shields.io/npm/v/@uiw/react-empty.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-empty) | - [`@uiw/react-file-input`](/packages/react-file-input) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-file-input?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-file-input) | [![npm version](https://img.shields.io/npm/v/@uiw/react-file-input.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-file-input) | - [`@uiw/react-form`](/packages/react-form) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-form?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-form) | [![npm version](https://img.shields.io/npm/v/@uiw/react-form.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-form) | - [`@uiw/react-grid`](/packages/react-grid) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-grid?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-grid) | [![npm version](https://img.shields.io/npm/v/@uiw/react-grid.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-grid) | - [`@uiw/react-icon`](/packages/react-icon) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-icon?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-icon) | [![npm version](https://img.shields.io/npm/v/@uiw/react-icon.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-icon) | - [`@uiw/react-input`](/packages/react-input) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-input?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-input) | [![npm version](https://img.shields.io/npm/v/@uiw/react-input.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-input) | - [`@uiw/react-list`](/packages/react-list) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-list?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-list) | [![npm version](https://img.shields.io/npm/v/@uiw/react-list.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-list) | - [`@uiw/react-loader`](/packages/react-loader) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-loader?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-loader) | [![npm version](https://img.shields.io/npm/v/@uiw/react-loader.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-loader) | - [`@uiw/react-menu`](/packages/react-menu) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-menu?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-menu) | [![npm version](https://img.shields.io/npm/v/@uiw/react-menu.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-menu) | - [`@uiw/react-message`](/packages/react-message) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-message?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-message) | [![npm version](https://img.shields.io/npm/v/@uiw/react-message.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-message) | - [`@uiw/react-modal`](/packages/react-modal) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-modal?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-modal) | [![npm version](https://img.shields.io/npm/v/@uiw/react-modal.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-modal) | - [`@uiw/react-month-picker`](/packages/react-month-picker) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-month-picker?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-month-picker) | [![npm version](https://img.shields.io/npm/v/@uiw/react-month-picker.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-month-picker) | - [`@uiw/react-notify`](/packages/react-notify) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-notify?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-notify) | [![npm version](https://img.shields.io/npm/v/@uiw/react-notify.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-notify) | - [`@uiw/react-overlay`](/packages/react-overlay) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-overlay?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-overlay) | [![npm version](https://img.shields.io/npm/v/@uiw/react-overlay.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-overlay) | - [`@uiw/react-overlay-trigger`](/packages/react-overlay-trigger) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-overlay-trigger?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-overlay-trigger) | [![npm version](https://img.shields.io/npm/v/@uiw/react-overlay-trigger.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-overlay-trigger) | - [`@uiw/react-pagination`](/packages/react-pagination) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-pagination?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-pagination) | [![npm version](https://img.shields.io/npm/v/@uiw/react-pagination.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-pagination) | - [`@uiw/react-pin-code`](/packages/react-pin-code) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-pin-code?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-pin-code) | [![npm version](https://img.shields.io/npm/v/@uiw/react-pin-code.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-pin-code) | - [`@uiw/react-popover`](/packages/react-popover) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-popover?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-popover) | [![npm version](https://img.shields.io/npm/v/@uiw/react-popover.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-popover) | - [`@uiw/react-portal`](/packages/react-portal) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-portal?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-portal) | [![npm version](https://img.shields.io/npm/v/@uiw/react-portal.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-portal) | - [`@uiw/react-progress`](/packages/react-progress) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-progress?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-progress) | [![npm version](https://img.shields.io/npm/v/@uiw/react-progress.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-progress) | - [`@uiw/react-radio`](/packages/react-radio) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-radio?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-radio) | [![npm version](https://img.shields.io/npm/v/@uiw/react-radio.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-radio) | - [`@uiw/react-rate`](/packages/react-rate) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-rate?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-rate) | [![npm version](https://img.shields.io/npm/v/@uiw/react-rate.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-rate) | - [`@uiw/react-search-select`](/packages/react-search-select) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-search-select?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-search-select) | [![npm version](https://img.shields.io/npm/v/@uiw/react-search-select.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-search-select) | - [`@uiw/react-search-tree`](/packages/react-search-tree) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-search-tree?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-search-tree) | [![npm version](https://img.shields.io/npm/v/@uiw/react-search-tree.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-search-tree) | - [`@uiw/react-select`](/packages/react-select) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-select?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-select) | [![npm version](https://img.shields.io/npm/v/@uiw/react-select.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-select) | - [`@uiw/react-slider`](/packages/react-slider) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-slider?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-slider) | [![npm version](https://img.shields.io/npm/v/@uiw/react-slider.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-slider) | - [`@uiw/react-steps`](/packages/react-steps) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-steps?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-steps) | [![npm version](https://img.shields.io/npm/v/@uiw/react-steps.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-steps) | - [`@uiw/react-switch`](/packages/react-switch) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-switch?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-switch) | [![npm version](https://img.shields.io/npm/v/@uiw/react-switch.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-switch) | - [`@uiw/react-table`](/packages/react-table) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-table?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-table) | [![npm version](https://img.shields.io/npm/v/@uiw/react-table.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-table) | - [`@uiw/react-tabs`](/packages/react-tabs) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-tabs?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-tabs) | [![npm version](https://img.shields.io/npm/v/@uiw/react-tabs.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-tabs) | - [`@uiw/react-tag`](/packages/react-tag) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-tag?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-tag) | [![npm version](https://img.shields.io/npm/v/@uiw/react-tag.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-tag) | - [`@uiw/react-textarea`](/packages/react-textarea) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-textarea?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-textarea) | [![npm version](https://img.shields.io/npm/v/@uiw/react-textarea.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-textarea) | - [`@uiw/react-time-picker`](/packages/react-time-picker) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-time-picker?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-time-picker) | [![npm version](https://img.shields.io/npm/v/@uiw/react-time-picker.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-time-picker) | - [`@uiw/react-tooltip`](/packages/react-tooltip) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-tooltip?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-tooltip) | [![npm version](https://img.shields.io/npm/v/@uiw/react-tooltip.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-tooltip) | - [`@uiw/react-tree`](/packages/react-tree) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-tree?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-tree) | [![npm version](https://img.shields.io/npm/v/@uiw/react-tree.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-tree) | - [`@uiw/react-tree-checked`](/packages/react-tree-checked) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-tree-checked?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-tree-checked) | [![npm version](https://img.shields.io/npm/v/@uiw/react-tree-checked.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-tree-checked) | - [`@uiw/utils`](/packages/utils) | [![npm downloads](https://badgen.net/npm/dw/@uiw/utils?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/utils) | [![npm version](https://img.shields.io/npm/v/@uiw/utils.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/utils) | - **Package** | **Downloads** | **Version** | **Description** [`@uiw/react-split`](https://github.com/uiwjs/react-split) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-split?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-split) | [![npm version](https://img.shields.io/npm/v/@uiw/react-split.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-split) | - [`@uiw/react-layout`](https://github.com/uiwjs/react-layout) | [![npm downloads](https://badgen.net/npm/dw/@uiw/react-layout?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-layout) | [![npm version](https://img.shields.io/npm/v/@uiw/react-layout.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-layout) | - [`@uiw/formatter`](https://github.com/uiwjs/date-formatter) | [![npm downloads](https://badgen.net/npm/dw/@uiw/formatter?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/formatter) | [![npm version](https://img.shields.io/npm/v/@uiw/formatter.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/formatter) | - ### Development Use Gitpod, a free online dev environment for GitHub. [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/uiwjs/uiw) Or clone locally: ```bash $ git clone git@github.com:uiwjs/uiw.git ``` Install dependencies & compile component code. ```bash $ npm install # Install dependencies $ npm run hoist $ npm run build ``` To develop, run the self-reloading build: ```bash # Run the app # Restart the app automatically every time code changes. # Useful during development. $ npm run lib:watch $ npm run start $ lerna run --scope uiw watch --stream $ lerna exec --scope @uiw/button -- tsbb types --outDir lib/esm --target ESNEXT --watch $ lerna exec --scope @uiw/button -- tsbb watch --target react --env-name esm:dev --env-name cjs ``` Folders ```bash ├── LICENSE ├── README.md ├── package.json ├── website │   ├── uiw # Documentation website source code └── packages     ├── uiw # Component library source code     ├── react-alert     ├── react-tree     ├── ...     └── react-affix ``` ### Contributors ### License Licensed under the MIT License. --- _Source: https://npm.io/package/uiw · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._