Introduction
uView Pro X is a UI component library built on UTS + UCSS for uni-app x. It is the uni-app x migration of uView Pro. Components share the ux- prefix and are written in strongly-typed UTS; on App they compile to native Kotlin / Swift, so one codebase runs natively on App (Android / iOS / HarmonyOS), H5, and WeChat Mini Program.
Features
- Native rendering: on App it uses uni-app x's Vapor compilation, driving native nodes directly and bypassing the virtual DOM.
- Strong typing: every component's props / events / slots are typed, with shared public types in
types/global.uts. - Theming: ships with the default blue theme, supports registering multiple themes, runtime switching, and dark mode, with tokens generating CSS variables automatically.
- i18n: ships with
zh-CN/en-USpacks, supports custom packs, namespaced lookups, and persistence. - Zero third-party runtime dependencies: utilities and hooks are bundled and exposed on
$u, with no extra runtime library. - On-demand imports:
ux-*components are picked up by easycom, no manual registration needed.
Component groups
Components are organized into seven functional groups, consistent across docs and the demo menu:
| Group | Description | Examples |
|---|---|---|
| Basic | Atomic elements such as icon, image, button, cell | Icon, Image, Button, Cell |
| Form | Input, selection, validation and switch controls | Form, Input, Picker, Checkbox |
| Data | Progress, counting and carousel displays | LineProgress, CountTo, Swiper |
| Feedback | Popups, toasts, loading and status feedback | ActionSheet, Toast, Popup, Modal |
| Layout | Cards, grids, columns and dividers | Card, Grid, Layout, Divider |
| Navigation | Navbar, tabs, steps and pagination | Navbar, Tabs, Steps, Pagination |
| Others | Spacing, safe area, status bar and helpers | Gap, SafeBottom, Transition, Skeleton |
Bundled capabilities
Beyond components, the library also provides:
- Utilities:
$u.addUnit,$u.toStyle,$u.deepMerge,$u.hexToRgbaand more, covering unit conversion, style composition, deep merge, and color handling. - Composables (hooks):
useTheme,useLocale,useBEM,useRect,useSafeArea, etc., for theming, i18n, and layout measurement.
Next steps
- Get started: Quick Start
- Re-skin: Theming
- Dark adaptation: Dark Mode
- Internationalization: i18n