Onsen UI — Cross-Platform Mobile UI for Web Developers

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/