# Onsen UI: Web Components for Hybrid Apps and PWAs, With Bindings for React, Vue and Angular

> Onsen UI is a framework-agnostic Web Components library for native-feeling hybrid apps and PWAs, shipped with React, Vue, Vue 3, Angular 2+ and AngularJS 1.x bindings. It solves the styling and navigation problem, not the packaging one, and the last push to master was on 2026-06-17.

**OnsenUI/OnsenUI** — Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

- Repository: https://github.com/OnsenUI/OnsenUI
- Website: https://onsen.io/
- Stars: 8,856 · Forks: 994
- Language: JavaScript
- License: not declared
- Published: 2026-09-21 · Updated: 2026-09-21 · Language: en
- Canonical page: https://hysenlabs.com/projects/onsenui-onsenui

## The problem Onsen UI actually solves

Building a mobile app in a WebView means you inherit a browser engine and then have to fake a native look on top of it. Onsen UI targets that specific gap. It is a component library and SDK for hybrid apps and Progressive Web Apps, and the README describes it as an open source framework for native-feeling PWAs and hybrid apps. The core is written in pure JavaScript on top of Web Components, which is why the project can claim to be framework agnostic.

The audience is narrow and specific. You are building something that runs inside Cordova or as an installable PWA, you want one codebase to look correct on both iOS and Android, and you already have a framework you do not want to abandon. Onsen UI does not give you a build pipeline, a native shell or a backend. It gives you the screens, the navigation transitions and the platform styling. Everything else is somebody else's job, which the README is candid about: it points at Monaca for Cordova templates, remote build, push notifications and CI, and describes Monaca as developed by the Onsen UI team. That is a commercial product sitting next to the open source library, and the README treats it as the recommended path for the parts Onsen UI does not cover.

## Web Components at the core, thin bindings around the edges

The repository is a monorepo, and its package.json declares workspaces for ./onsenui, ./react-onsenui, ./vue3-onsenui, ./vue-onsenui-examples, ./react-onsenui-examples, ./vue3-onsenui-examples and ./css-components-previewer. The root package is named onsenui-monorepo and is marked private. That layout tells you where the real code lives: onsenui is the core, and the framework packages are adapters.

The mechanism is a split between CSS and custom elements. The README states that the CSS components are pure and performant CSS without JavaScript behavior, and that extra details such as dragging or ripple effects are added by Onsen UI custom elements. So a button or a list item is styled by a stylesheet, and the interactive parts are attached by a registered custom element. That is the whole architecture in one sentence, and it explains why the framework bindings can stay thin: there is no framework-specific rendering engine to maintain, only a wrapper that maps props and events onto the same custom elements.

Platform styling is the second half. The README says both flat (iOS) and Material (Android) designs are included, and that components are optionally auto-styled based on the platform, which makes it possible to support both iOS and Android with the same source code. The word optionally matters. Auto-styling is a switch, not a mandate, so you can force one design language across both platforms if brand consistency beats platform fidelity for your app. That choice is usually invisible until you test on a real device and notice the same screen looks like two different products.

## Installing Onsen UI and rendering a first page

The README gives npm as the primary route. The core library installs on its own, and the bindings are separate packages: react-onsenui, vue-onsenui, ngx-onsenui and angularjs-onsenui.

```bash
npm install onsenui
```

The README also points at unpkg, jsDelivr and cdnjs if you would rather not bundle, and at a distribution repository with a changelog for released builds. There is a separate latest development build page, and the README warns that everything there is usually tested but might be unstable sometimes. Treat that page as a testing channel, not a source of record.

Once the core is present, the components are custom elements, so the entry point is the stylesheet plus the library script. The README describes the CSS components as pure CSS with behavior layered on by the custom elements, which is why both pieces are needed before anything renders correctly. The README does not inline a full starter template; it routes you to the per-framework getting started guides for core, Vue, React, Angular 2+, AngularJS 1.x and jQuery, and to an interactive playground. That is the honest place to begin: the guides exist, and this article is not a substitute for them.

## The release history is the real constraint

The newest release listed is 2.12.8 from 2022-12-27, preceded by 2.12.7 on the same day and 2.12.6 from 2022-10-17. The last push to master was on 2026-06-17, so the repository is not archived and work is happening, but the published version line has not moved in a long time. Anyone evaluating Onsen UI has to hold those two facts at once: commits continue, releases do not.

For a UI component library that is less alarming than it sounds, because the surface is CSS and custom elements rather than a runtime with a security boundary. A stylesheet does not need monthly patches. But it does mean you should not expect a documented migration path to a 3.x. There is no 3.x in the release list. If your project plan assumes the core library will absorb new platform conventions, that assumption is not supported by what is published.

The second constraint is the binding matrix. AngularJS 1.x is listed as a first-class binding in the README table, and Aurelia and EmberJS are described as community packages that are not tested or implemented by the core team. That is an unusually clear statement of support boundaries, and it should shape your choice. If you are on Ember, you are on your own for integration bugs. If you are on Vue 3, the monorepo has a vue3-onsenui workspace, so that path is maintained in-repo rather than community.

The third is documentation depth outside the happy path. The README is a hub that links to the docs site, the blog, a forum and a Discord chat. It does not document rollback, version compatibility between the core and a binding, or what happens when auto-styling misfires on an unusual device. Those answers live in the docs site or the forum, and you should read them there before committing.

## Onsen UI versus Ionic, Framework7 and Konsta UI

The obvious comparison is Ionic, which also targets hybrid apps and PWAs with a component library and framework bindings. The difference is the layer where each one takes control. Ionic ships a CLI and a project structure and expects to own the app scaffold, which is why swapping it out later is expensive. Onsen UI installs as a library into an app you already have, and the README's own framing is that it is framework agnostic and works with your favorite framework and its tools. If you want a library, Onsen UI is the lighter commitment. If you want an opinionated toolchain, Onsen UI is not offering one, and the README redirects that need to Monaca.

Framework7 is closer in spirit: a UI framework for hybrid apps with its own components and platform styling. The practical difference is the binding story. Onsen UI publishes separate packages for React, Vue, Vue 3, Angular 2+ and AngularJS 1.x, and the monorepo keeps the React and Vue adapters alongside the core. Framework7's approach to framework integration is its own matter, and you should check it directly rather than assume parity.

Konsta UI takes a different route again, sitting on top of Tailwind CSS and providing mobile components as utility-classed markup. That means your styling decisions live in class names in your templates, not in a shipped stylesheet with an auto-styling switch. If your team already runs Tailwind, Konsta UI fits the existing mental model. If you want platform detection handled by the component library, Onsen UI's auto-styling is the more direct answer. Kendo UI is a different category entirely: a commercial suite with support contracts, not a comparable open source component set.

## Licence and the cost of upgrading

The repository metadata does not state a licence for the project, and the root package.json carries "license": "ISC" for the private monorepo wrapper, which is not the same thing as the licence of the published onsenui package. The README calls Onsen UI open source but does not name a licence in the text provided. Before you ship, read the licence file in the onsenui workspace or the licence field of the published npm package. This article cannot tell you what that licence permits, and you should not treat ISC in the root manifest as the answer.

Upgrade cost is the more practical number. The published release line stopped at 2.12.8 in 2022, so upgrading between 2.12.x releases is the realistic maintenance activity, and the README points at the distribution repository for a changelog. There is no documented major-version migration to plan for, which removes one kind of work and adds another: you cannot rely on a future release to fix a platform styling change, so budget for owning CSS overrides yourself. The bindings are separate packages with their own versions, so pinning the core and a binding independently is a real coordination task, not a formality.

## Conclusion

Adopt Onsen UI if you already ship a Cordova or Capacitor style hybrid app or a PWA and want flat iOS and Material Android styling from one source tree, and if your framework is React, Vue, Vue 3, Angular 2+ or AngularJS 1.x. Do not adopt it if you need a documented upgrade path on the core library: the newest release is 2.12.8 from 2022-12-27, so verify the version you land on and read the dist repository changelog before pinning anything.

## FAQ

### What is Onsen UI?

It is an open source framework for building native-feeling Progressive Web Apps and hybrid apps, with a core written in pure JavaScript on top of Web Components. It is framework agnostic and ships bindings for React, Vue, Angular 2+ and AngularJS 1.x.

### How does Onsen UI compare with Ionic?

Both target hybrid apps and PWAs, but they take control at different layers. Ionic ships a CLI and expects to own the app scaffold, while Onsen UI installs as a library into an app you already have and stays framework agnostic. Onsen UI does not provide a build pipeline or native shell, and the README points at Monaca for Cordova templates, remote build and push notifications.

### What are the alternatives to Onsen UI?

Framework7 is the closest in intent, a UI framework for hybrid apps with its own components and platform styling. Konsta UI sits on top of Tailwind CSS and expresses mobile components as utility-classed markup, while Kendo UI is a commercial suite with support contracts rather than a comparable open source component set.

## Sources

- [Issues](https://github.com/OnsenUI/OnsenUI/issues)
- [OnsenUI/OnsenUI on GitHub](https://github.com/OnsenUI/OnsenUI)
- [Project website](https://onsen.io/)
- [README](https://github.com/OnsenUI/OnsenUI/blob/master/README.md)
- [Releases](https://github.com/OnsenUI/OnsenUI/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/onsenui-onsenui