# Framework7 — Full-Featured Mobile UI Framework for iOS and Android

> A free, open-source HTML framework for building native-looking mobile apps with web technologies, supporting iOS and Material Design themes.

## Install

Save as a script file and run:

# Framework7 — Full-Featured Mobile UI Framework for iOS and Android

## Quick Use
```bash
npm install framework7 framework7-react
# or create a new project
npx framework7-cli create --ui
```
```jsx
import Framework7React from 'framework7-react';
import { App, View, Page, Navbar, Block } from 'framework7-react';

const MyApp = () => (
  <App theme="ios">
    <View main>
      <Page>
        <Navbar title="My App" />
        <Block>Welcome to Framework7</Block>
      </Page>
    </View>
  </App>
);
```

## Introduction
Framework7 is an open-source UI framework for building cross-platform mobile, desktop, and web apps with a native look and feel. It provides pixel-perfect iOS and Android (Material Design) components out of the box, letting web developers create mobile apps using familiar HTML, CSS, and JavaScript without learning native SDKs.

## What Framework7 Does
- Renders native-quality iOS and Material Design interfaces using HTML and CSS
- Includes 100+ UI components like navigation bars, modals, lists, and action sheets
- Supports React, Vue, and Svelte through official bindings
- Provides built-in page transitions, swipe gestures, and pull-to-refresh
- Works standalone or integrates with Capacitor and Cordova for native device access

## Architecture Overview
Framework7 uses a view-based router where each view manages its own page stack and navigation history. The core is a vanilla JavaScript library that handles DOM manipulation, touch events, and component lifecycle. Framework-specific bindings (React, Vue, Svelte) wrap the core components as reactive wrappers. Theming is handled via CSS variables that switch between iOS and Material Design automatically based on the device.

## Self-Hosting & Configuration
- Create new projects with the official CLI wizard (framework7-cli)
- Install via npm and integrate into existing React, Vue, or Svelte projects
- Configure theme (ios, md, or auto) in the App component props
- Customize colors and styles via CSS variables without modifying source
- Build for iOS and Android using Capacitor or Cordova for native deployment

## Key Features
- Pixel-perfect iOS and Material Design components that adapt automatically
- Built-in swipeable views, infinite scroll, and virtual list for smooth performance
- Integrated router with animated page transitions and nested routes
- Native-grade touch handling with fast click, swipe-back, and gestures
- Standalone mode works without any framework; React/Vue/Svelte are optional

## Comparison with Similar Tools
- **Ionic** — uses Web Components and Angular/React/Vue; Framework7 is lighter and has more opinionated native-style components
- **React Native** — compiles to native views; Framework7 uses web rendering for simpler deployment
- **NativeScript** — accesses native APIs directly; Framework7 stays in the web layer for portability
- **Onsen UI** — similar HTML5 mobile framework; Framework7 has a larger component set and more active updates
- **Quasar** — Vue-specific with SSR support; Framework7 supports multiple frameworks and focuses on mobile UX

## FAQ
**Q: Can I build both iOS and Android apps from one codebase?**
A: Yes. Framework7 auto-detects the platform and applies the matching theme, or you can force a specific theme.

**Q: Does Framework7 support PWA?**
A: Yes, it includes service worker support and app manifest generation for progressive web apps.

**Q: How does performance compare to native apps?**
A: Framework7 uses hardware-accelerated CSS transitions and virtual DOM diffing for near-native scrolling and animation performance.

**Q: Can I use Framework7 without React or Vue?**
A: Yes, the core library works with plain JavaScript and HTML templates without any framework.

## Sources
- https://github.com/framework7io/framework7
- https://framework7.io

---
Source: https://tokrepo.com/en/workflows/asset-672575f1
Author: Script Depot