Framework7 alternative for Angular, React, and Vue

If you’re looking for a Framework7 alternative, the first question isn’t which library has the nicer buttons — it’s how much framework you actually want. Framework7 is a complete mobile app framework: its own router, a view stack with native-style page transitions, and one of the broadest component sets on the web. touchcn is the opposite bet — a shadcn-style component library for Angular, React, and Vue that is only the component layer. You bring your own router and app structure; it brings platform-authentic UI — Material 3 on Android, iOS 26 liquid glass on iOS — that you own and style with Tailwind CSS.

That difference in scope is the whole story of this comparison. If you’re starting from zero and want batteries included, Framework7’s all-in-one model is compelling. If you already have an Angular, React, or Vue app and just want components that look right on both platforms, adopting a second framework is a lot to take on. Let’s walk through where each one earns its place.

Two different scopes

The most important thing to understand is that these two projects are not solving the same problem. Framework7 is a framework in the full sense of the word: it owns your app’s structure. You get a router, a view stack with native-style page transitions, and a large catalog of components and interactions that all assume they live inside that structure. That’s a genuine advantage when you’re building from scratch — the hard parts of feeling native, like navigation and transitions, are already wired up for you.

touchcn deliberately does none of that. It is the component layer and nothing else. There is no router, no navigation stack, no opinion about how your app is organized. You keep your framework’s router — Angular Router, React Router, or Vue Router — and drop touchcn components into the structure you already have. And instead of installing components from an npm package, the CLI copies the styled source into your repository, the way shadcn does. You own every line and edit it directly.

Framework support follows from the scope, and it matters more than it first appears. Framework7 officially ships components for React, Vue, and Svelte, plus a vanilla-JS core — but not Angular. touchcn supports Angular, React, and Vue with the same component set on each. If your app is Angular, Framework7 was never really on the table, and touchcn is one of the few ways to get current-platform mobile UI there.

The design gap has closed — so what’s left?

Credit where it’s due: Framework7 v9 redesigned its iOS theme for iOS 26 and moved its color schemes to the current Material You spec. So “touchcn has the newer look” is not the pitch anymore — both projects now target the current platform design languages, and Framework7 got there with a decade of polish behind it.

What still separates them, beyond scope, is how the platform look is produced. touchcn renders both platforms from a single component set with no platform conditionals in your code: an AppearanceManager toggles .ios / .md classes on the root element, and all platform styling lives in one Tailwind token layer scoped to those classes. That has two practical consequences. First, the look switches at runtime — the same build serves both platforms, and you can flip themes live for testing or previews. Second, because the chrome is plain Tailwind tokens sitting below the utility layer, your own utility classes always win; customizing a component never turns into a specificity fight with framework CSS.

Two smaller design details are worth knowing. On Android, touchcn generates a full Material You palette from a single seed color at runtime, so brand theming stays spec-correct in light and dark without hand-picking tonal values. And glass — blur, translucency — is strictly iOS-only by rule; Material surfaces use opaque tonal color and elevation instead, which also sidesteps a real CSS pitfall (backdrop-filter creates containing blocks that break fixed-position overlays).

What using touchcn looks like

There’s no framework to adopt — you add it to the app you already have:

npx touchcn init                 # or --framework react / --framework vue
npx touchcn add navbar list button bottom-sheet

init writes a touchcn.json config and wires up the theme provider; add copies component source into your repo and installs the few npm packages each component needs. The current set is 40 components — page, navbar, tabbar, list, bottom sheet, action sheet, dialog, picker, pull-to-refresh, swipeout, and so on — plus 9 blocks: pre-composed screens like login, onboarding, paywall, and settings that you can drop in and reshape.

And owning the source doesn’t mean losing upstream fixes. touchcn diff shows what changed in the registry since you copied a component, and touchcn update applies those changes with a three-way merge that preserves your local edits — the part of the shadcn model that usually hurts, solved in the CLI.

Which should you choose?

Here’s the honest verdict. Framework7 is a complete mobile app framework — its own router, page transitions, and a very broad component set, so you can build a native-feeling app end to end without wiring those pieces yourself. That is its strength and, if you already have an Angular, React, or Vue app, its cost: you adopt Framework7’s way of structuring the whole app. touchcn is deliberately smaller — only the component layer, so you keep your router and architecture, style everything with Tailwind, and own the source.

Choose touchcn if:

• You already have an Angular, React, or Vue app and want to add UI, not adopt a framework.
• You build with Angular — Framework7 has no Angular components.
• You want to keep your existing router and architecture.
• You use Tailwind and want to own (and still update) the styled source.

Choose Framework7 if:

• You want an all-in-one mobile framework with its own router and view transitions.
• You need a very broad, ready-made component and interaction set today.
• You build with Svelte or vanilla JS — touchcn does not support these yet.
• You want native-feeling navigation handled for you.

There’s no trick answer here. If you’re greenfield and want the whole app scaffolded for you, Framework7 does more out of the box. If you have an app already and the missing piece is platform-authentic components you can style and own, that’s the gap touchcn is built for.

FAQ

Does touchcn include routing like Framework7?

No. Framework7 ships its own router and page-stack navigation; touchcn is only the component layer. You use your framework’s router — Angular Router, React Router, or Vue Router — and touchcn for the UI, which keeps touchcn small and unopinionated about app structure.

Does Framework7 support the iOS 26 look?

Yes. Framework7 v9 shipped iOS 26 styles across its components and updated its color schemes to the current Material You spec. The real differences between the two projects today are scope (full framework vs. component layer), the ownership model, Tailwind-native styling, and Angular support — not design currency.

Can I use Framework7 with Angular?

Framework7 has no official Angular components — its supported wrappers are React, Vue, and Svelte, plus a vanilla-JS core. touchcn supports Angular as a first-class framework alongside React and Vue, which makes it one of the few options for platform-adaptive mobile UI in Angular apps.

Can I use touchcn with Svelte or vanilla JS like Framework7?

Not yet. Framework7 supports core JS, React, Vue, and Svelte. touchcn supports Angular, React, and Vue. If you need Svelte or vanilla JS, Framework7 or Konsta UI fits better right now.

Does touchcn work in Capacitor and Cordova apps?

Yes. It is plain web tech, so it runs in Capacitor and Cordova WebViews and in installable PWAs — the same environments Framework7 targets for packaging. There are dedicated guides for both setups: Capacitor and Cordova.

If touchcn sounds like the right fit, the getting-started guide walks you through adding it to your app.