# Onsen UI — Cross-Platform Mobile UI for Web Developers

> An HTML5 mobile app development framework providing native-feeling UI components with bindings for React, Vue, and Angular.

## Install

Save in your project root:

# Onsen UI — Cross-Platform Mobile UI for Web Developers

## Quick Use
```bash
npm install onsenui vue-onsenui
# In main.js:
import VueOnsen from 'vue-onsenui'
import 'onsenui/css/onsenui.css'
import 'onsenui/css/onsen-css-components.css'
Vue.use(VueOnsen)
```

## Introduction
Onsen UI is an open-source framework for building mobile web apps and hybrid apps using standard web technologies. It provides platform-adaptive UI components that automatically match the look and feel of iOS and Android, letting developers create cross-platform apps with native-quality interactions.

## What Onsen UI Does
- Provides 100+ mobile-optimized UI components based on Web Components
- Automatically adapts styling between iOS and Material Design based on the platform
- Offers official bindings for React, Vue, Angular, and vanilla JavaScript
- Supports Cordova and Capacitor for packaging as native apps
- Includes page navigation, tab bars, side menus, and gesture handling

## Architecture Overview
Onsen UI is built on Custom Elements (Web Components), making the core framework-agnostic. Framework-specific bindings (React, Vue, Angular) wrap these custom elements with idiomatic APIs. The CSS layer uses a dual-theme system that detects the platform at runtime and applies either iOS flat styling or Android Material Design. Animations use CSS transitions and the Web Animations API for smooth 60fps interactions.

## Self-Hosting & Configuration
- Install via npm and import the CSS files and framework binding
- Use the `ons-platform` utility to force a specific platform theme if needed
- Configure page transitions and animation styles globally or per component
- Works with any build tool that supports ES modules
- Deploy as a PWA or package with Cordova/Capacitor for app store distribution

## Key Features
- Automatic platform detection with iOS and Android styling
- Framework-agnostic core with first-class React, Vue, and Angular support
- Built-in page stack navigation with push/pop transitions
- Touch-optimized components with gesture recognizers
- PWA-ready with service worker support and offline capabilities

## Comparison with Similar Tools
- **Ionic** — Larger ecosystem and community, heavier framework coupling
- **Framework7** — Similar mobile-first approach, tighter iOS design fidelity
- **NativeScript** — Compiles to actual native UI, not web-based
- **Quasar** — Vue-only, broader target platforms including desktop
- **React Native** — True native rendering, requires React and native toolchain

## FAQ
**Q: Can Onsen UI apps be published to app stores?**
A: Yes. Package your app with Cordova, Capacitor, or Monaca to build native binaries for iOS and Android app stores.

**Q: Does it work with Vue 3?**
A: Vue 3 support is available through the vue3-onsenui binding package.

**Q: How does platform detection work?**
A: Onsen UI checks the user agent at runtime and applies the matching CSS theme. You can override this to force a specific platform style.

**Q: Is Onsen UI free?**
A: Yes. Onsen UI is fully open source under the Apache 2.0 license.

## Sources
- https://github.com/OnsenUI/OnsenUI
- https://onsen.io/

---
Source: https://tokrepo.com/en/workflows/onsen-ui-cross-platform-mobile-ui-web-developers-f35e3ccb
Author: AI Open Source