Ionic, Onsen, Konsta, Quasar

Ionic, Onsen UI, Konsta UI and Quasar

Ionic Framework 20,753 (github.com/ionic-team/ionic-framework (https://github.com/ionic-team/ionic-framework 52,684 ), MIT) is the largest. Its components are Web Components built with Stencil 672,850 (@ionic/core), wrapped by @ionic/angular, @ionic/react and @ionic/vue, with iOS and Material Design 15,533 modes like Framework7 572,986 's themes. Ionic's team also makes Capacitor 243,123 (Capacitor), so the two fit together closely. Install with npm 2,036 install @ionic/core, or scaffold with npm install -g @ionic/cli and ionic start. Because they are Web Components, Ionic's elements work from a CDN with no build step; here is the start of BookNest's catalog in Ionic's iOS mode, for comparison with Dynamic Routes:

Two BookNest books with Ionic 9.0.5 Web ComponentsHTML
<!doctype html>
<html mode="ios">
<head>
  <script type="module"
    src="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.5/dist/ionic/ionic.esm.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.5/css/ionic.bundle.css">
</head>
<body>
  <ion-app>
    <ion-header><ion-toolbar><ion-title>BookNest</ion-title></ion-toolbar></ion-header>
    <ion-content>
      <ion-list inset>
        <ion-item button detail><ion-label>The Quiet Harbor<p>Mara Ellison</p></ion-label>
          <ion-note slot="end">$14.99</ion-note></ion-item>
        <ion-item button detail><ion-label>Patterns of the Deep Web<p>Tomas Reyes</p></ion-label>
          <ion-note slot="end">$39.50</ion-note></ion-item>
      </ion-list>
    </ion-content>
  </ion-app>
</body>
</html>
Browser output of Listing 2.91
Browser output of 91

The markup reads like Framework7's, with custom elements (<ion-item>) where Framework7 uses classes on plain HTML (<li class="item-content">); navigation, though, comes from Angular 42,088 , React 7,897 or Vue 5,482 routing or Ionic's own <ion-nav>, not from a URL router inside the kit.

Onsen UI 450,074 (github.com/OnsenUI/OnsenUI (https://github.com/OnsenUI/OnsenUI 8,856 ), Apache-2.0) is also Web Components (<ons-page>, <ons-toolbar>) with React, Vue and Angular bindings and iOS and Material styles. It is maintained by the team behind Monaca, commercial tools for Cordova 129 apps, and its releases have slowed.

Konsta UI (github.com/konstaui/konsta (https://github.com/konstaui/konsta 4,257 ), MIT) is by Vladimir Kharlampidi, Framework7's author. It is a set of iOS and Material components built on Tailwind CSS 5,202 for React, Vue and Svelte 36,701 , with no router or store; its site suggests using it inside a "parent" framework such as Ionic or Framework7 (npm install konsta).

Quasar 295,643 (github.com/quasarframework/quasar (https://github.com/quasarframework/quasar 27,215 ), MIT) is Vue-only and Material-styled, and it is more than a UI kit: its CLI builds one code base as a single-page app, SSR site, PWA, Capacitor or Cordova app, Electron 20,509 app or browser extension (npm create quasar@latest).