1. Project Overview

An enterprise-grade mobile UI component library developed by ZhongAn Technology using React.

The name Zarm (pronounced /zɑːm/, similar to "Zahm") was inspired by ZhongAn Insurance's philosophy: providing insurance with warmth. Zarm = za + warm. "za" represents "ZhongAn," while "warm" conveys the meaning of warmth. The name combines the left and right parts around the shared letter "a." Pursuing an exceptional user experience and creating a component library with warmth are also the original motivations behind the Zarm project.

2. Open Source License

Licensed under MIT

3. Screenshots

4. Feature Overview

Features

• Extracts interaction patterns and visual styles from enterprise-grade mobile products, gradually shaping users' visual perceptions and behavioral habits.
• Implements high-quality frontend code.
• Establishes specifications and standards to reduce the labor and communication costs of design and development.
• Works with the tool ecosystem to help businesses quickly create high-quality product prototypes.
• Provides internationalization solutions and multilingual support.
• Developed with TypeScript, supporting static type checking to improve the development experience.

Zarm: ZhongAn Technology Mobile UI Component Library

General (2)

• Button
• Icon

Data Entry (15)

• Calendar
• Cascader
• Checkbox
• CustomInput
• DatePicker
• FilePicker
• Input
• Keyboard
• Picker
• Radio
• Rate
• SearchBar
• Slider
• Stepper
• Switch

Feedback (11)

• ActionSheet
• Loading
• Message
• Modal
• PinchZoom
• Popper
• Popup
• Pull
• Skeleton
• SwipeAction
• Toast

Data Display (12)

• Badge
• Carousel
• Collapse
• Image
• ImagePreview
• List
• Marquee
• NoticeBar
• Panel
• Progress
• Tooltip
• WaterMark

Navigation (5)

• Affix
• Grid
• NavBar
• TabBar
• Tabs

Hooks (5)

• useClickAway: Detect clicks outside an element
• useInViewport: Detect when an element enters the browser viewport
• useLongPress: Long press
• useOrientation: Screen orientation
• useScroll: Scroll

Others (3)

• BackTop: Back to top
• ConfigProvider: Global configuration
• Mask: Overlay

5. Tech Stack

Compatibility

• iOS Safari 10+
• Android 5+

To support older browser versions, the corresponding Polyfill must be provided. Please refer to the README.md documentation.

Installation

Install via npm or yarn

# npm
$ npm install zarm --save

# yarn
$ yarn add zarm

Usage

import { Button, Cell } from 'zarm';
import 'zarm/dist/zarm.css';