HIUI is a React component library and design system for building mid- and back-office (admin) interfaces, aimed at front-end teams that need consistent interaction and visual standards across internal business products.

What it is

HIUI is a front-end component library written in TypeScript and React, published under the MIT licence and distributed through npm. It is aimed at mid- and back-office systems — the internal admin consoles, dashboards and business workflow tools that sit behind a product — and it provides both components and templates so that developers can reach an interface with consistent interaction and appearance quickly. The project describes itself as a solution for formulating and implementing interaction and UI design standards across front, middle and back ends, and it ships a documentation site, a CLI, and companion design skills alongside the component packages.

The concrete problem it addresses is duplication and inconsistency in internal tooling: teams building admin screens repeatedly re-implement the same data display, form and process patterns, each one slightly different. HIUI replaces that ad-hoc work with a set of single components designed with their data structures separated, plus a set of process and data-display templates drawn from real business usage, so most mid/back-office requirements are covered out of the box. Because components are decoupled from their data shape, the project positions them as easy to adopt without a learning curve and easy to upgrade.

Key capabilities

• Install the whole library with npm install @hi-ui/core @hi-ui/hiui, or pull individual components on demand with npm install @hi-ui/core @hi-ui/, with component names written in lowercase and hyphenated.
• Consume ready-made process and data-display templates that cover the majority of mid- and back-office system requirements, rather than assembling screens from primitives alone.
• Use single components with a separated data structure, which the project states require no learning and are straightforward to upgrade.
• Run the included HiUI CLI for project-level workflows, documented separately under docs/hiui-cli/.
• Apply the HiUI Design skill and the user-experience review (走查) skill, each with its own usage guide in the documentation.
• Follow a published JavaScript style guide and a contribution guide in CONTRIBUTING.md when extending or fixing the library.
• Read the full quick-start and component reference at the hosted documentation site, https://xiaomi.github.io/hiui/docs/quick-start, with a Chinese README and an English README.EN.md.

Who uses it and how

• Front-end teams building mid- and back-office products who want a shared interaction and visual standard across front, middle and back ends of an organisation's software.
• Organisations that need consistent internal admin interfaces quickly, relying on the supplied process and data-display templates as starting points for business screens.
• Developers who prefer partial adoption: installing only the components a screen needs via the per-component npm packages rather than the full library.
• Contributors working against a defined JavaScript style guide and a documented contribution process, in a repository with 876 stars, 118 forks and 84 open issues.

Getting started

Install the packages from npm with npm install @hi-ui/core @hi-ui/hiui (setting the registry first with npm config set registry https://registry.npmjs.org), then follow the quick-start guide in the hosted documentation at https://xiaomi.github.io/hiui/docs/quick-start.

How it compares

HIUI stands alone in this registry among similar tools named in the available facts; the description names no comparable libraries, and no list of paid products it replaces is provided, so no direct comparison can be drawn from the material at hand.

When to use it — and when not to

Choose it when you are building React-based internal or admin interfaces and want a component set specifically tuned for mid- and back-office interaction patterns, with templates and a CLI to speed that work up. Do not choose it if you need a general-purpose UI kit for consumer-facing product surfaces, since the project's stated focus is on mid/back-office interaction and visual design. Note that 84 issues are open, the README is written primarily in Chinese with an English variant available, and the facts give no container image, hosted option or self-hosting infrastructure to operate.

npm config set registry https://registry.npmjs.org

npm install @hi-ui/core @hi-ui/hiui

npm config set registry https://registry.npmjs.org

npm install @hi-ui/core @hi-ui/组件名