Omni-UI: An Open-Source Component Library for OpenHarmony ArkUI to Accelerate Mobile Development

With the rapid spread of the HarmonyOS, development efficiency has become a critical challenge; developers often waste time reinventing basic UI components and handling complex cross‑device adaptations.

While mature ecosystems like Android benefit from numerous open‑source component libraries (e.g., Tencent's QMUI), the fast‑growing Harmony ecosystem lacks standardized, enterprise‑grade component solutions, forcing developers to invest heavily in low‑level compatibility work.

Omni‑UI was created by the 58 Anjuke real‑estate wireless team as an open‑source ArkUI component library that deeply integrates native Harmony capabilities, offering more than 25 ready‑to‑use, highly extensible components covering views, forms, navigation, and charts, thereby improving development efficiency by over 30%.

The library’s design focuses on high reusability: it builds composite components on top of ArkUI atomic elements (Button, Text, Image, etc.) and groups them into five categories—view, form, operation feedback, navigation, and chart—providing comprehensive coverage for information display, status prompts, and data visualization.

Omni‑UI also supports one‑click theme switching; developers can dynamically change the app’s theme without restarting the application.

To integrate Omni‑UI, add the package via the OpenHarmony package manager:

ohpm install @wuba/omni-ui

For example, the Tag component can be used as follows:

import { OmniTag, TagItemInfo, TagMode } from '@omni-ui/omni_component'
import { LengthMetrics } from '@kit.ArkUI';

@Builder
export function TagEntryPageBuilder() {
  TagEntryPage()
}

@Entry
@Component
struct TagEntryPage {
  @State tagItems1: TagItemInfo[] = [
    new TagItemInfo({ title: 'Pure text tag' }),
    new TagItemInfo({
      title: 'Text with icon',
      icons: { left: { icon: $r('app.media.tag_heart') } }
    })
  ]

  build() {
    NavDestination() {
      Column() {
        OmniTag({
          tagItems: this.tagItems1,
          mode: TagMode.FLEX,
          style: {
            fontSize: 12,
            fontColor: 0x6884A5,
            backgroundColor: 0x249DB8D7,
            itemBorder: { radius: 3 },
            itemPadding: { left: 10, right: 10, top: 3, bottom: 3 },
            itemSize: { width: 100, height: 30 }
          },
          flexSpace: { main: LengthMetrics.vp(8), cross: LengthMetrics.vp(8) }
        })
        .margin({ left: 20, top: 10, right: 13, bottom: 8 })
      }.justifyContent(FlexAlign.Center)
    }.title('Tag Example')
  }
}

Running the page displays the Tag component as illustrated in the accompanying screenshots.

Detailed usage instructions are available in the online documentation at https://wuba.github.io/omni-ui/ .

Omni‑UI is now open‑source (https://github.com/wuba/omni-ui) and the team plans to continuously enrich the ecosystem with more composite components and tools to further improve UI development experience.