PHPackages                             nativemobile/laravel-mobile-ui - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. nativemobile/laravel-mobile-ui

ActiveLibrary[Utility & Helpers](/categories/utility)

nativemobile/laravel-mobile-ui
==============================

PHP-first mobile UI package for Android WebView — Alpine.js + Livewire v4 components

1.0.0(3mo ago)01MITPHPPHP ^8.2

Since Mar 20Pushed 3mo agoCompare

[ Source](https://github.com/paravecdesign/phpnativemobile)[ Packagist](https://packagist.org/packages/nativemobile/laravel-mobile-ui)[ Docs](https://github.com/paravecdesign/phpnativemobile)[ RSS](/packages/nativemobile-laravel-mobile-ui/feed)WikiDiscussions main Synced 3w ago

READMEChangelog (2)Dependencies (4)Versions (2)Used By (0)

<<<<<<< HEAD

php-mobile-ui — Laravel Mobile UI Package
=========================================

[](#php-mobile-ui--laravel-mobile-ui-package)

======= <<<<<<< HEAD

Laravel Native Mobile UI
========================

[](#laravel-native-mobile-ui)

> > > > > > > 46a38dd77910e6d7e54f8f3015560b957cfdd758

> **A PHP-first, mobile-native UI component library for Laravel + Livewire v4**Built by [Elegant Media](https://elegantmedia.com.au) for Android WebView and NativePHP applications.

---

🎯 One-Year Vision
-----------------

[](#-one-year-vision)

This package powers the mobile storefront experience for two Elegant Media brands:

BrandProductGoal**Elegant Media**Internal tooling & client appsA premium PHP component SDK that competes with Flutter's widget philosophy, without leaving Laravel**The Appliance Store**Consumer-facing mobile commerceA high-performance product browsing, cart, and checkout UI entirely driven by Livewire v4 components---

📦 Installation
--------------

[](#-installation)

```
composer require nativemobile/laravel-mobile-ui
```

The package auto-discovers its service provider via Laravel's package auto-discovery.

---

🗺️ Phased Roadmap
-----------------

[](#️-phased-roadmap)

### ✅ Phase 1 — Foundation (Q1 2026)

[](#-phase-1--foundation-q1-2026)

**Goal:** Solid base that all future components inherit from.

- **`Widget`** — Abstract base class with fluent CSS API and `Htmlable` integration:
    - Spacing: `->padding()`, `->paddingX()`, `->paddingY()`, `->margin()`, `->marginX()`, `->marginY()`
    - Appearance: `->background()`, `->color()`, `->borderRadius()`, `->opacity()`, `->shadow()`
    - Layout: `->width()`, `->height()`, `->overflow()`
    - Identity: `->id()`, `->class()`, `->attr()`
- **`Stylable`** contract — defines the fluent style interface
- **`Renderable`** contract — `render(): string`
- **`Htmlable`** integration — `toHtml()` and `__toString()` for seamless Blade rendering

```
// Works directly in Blade templates
{!! TextView::make()->text('Hello, World!')->padding('16px')->background('#6200EE')->color('#fff') !!}

// Or as a Blade variable (Htmlable autorender)
$widget = TextView::make()->text('Hello')->padding('16px');
// {{ $widget }} works without {!! !!} escaping issues
```

---

### ✅ Phase 2 — Layouts (Q1–Q2 2026)

[](#-phase-2--layouts-q1q2-2026)

**Goal:** Flutter-style declarative layout primitives.

ComponentDescription`Column`Vertical flex layout. `mainAxisAlignment`, `crossAxisAlignment`, `gap`, `scrollable``Row`Horizontal flex layout. Same API, adds `wrap`, horizontal `scrollable``Stack`Absolute-positioned layers with 9-point alignment grid`Scaffold`Full-screen page shell composing AppBar + body + BottomNavigation + FAB```
Scaffold::make()
    ->appBar(AppBar::make()->title('Products')->withDrawer())
    ->body(
        Column::make()
            ->padding('16px')
            ->gap('12px')
            ->scrollable()
            ->children($productWidgets)
    )
    ->bottomNav(
        BottomNavigation::make()
            ->tabs(config('mobile-nav.bottom'))
            ->active('products')
            ->badges(['cart' => $cartCount])
    )
```

---

### ✅ Phase 3 — Navigation (Q2 2026)

[](#-phase-3--navigation-q2-2026)

**Goal:** Persistent, state-aware navigation with real-time badge counters.

ComponentFeature`BottomNavigation`Real-time badge counters (dot for 1, numeric for 2–99, "99+" cap). Livewire reactive via `wire:click`.`NavigationDrawer`Side-panel with per-item badge support, Alpine.js open/close, Android back-button integration`AppBar`Android status bar color sync, drawer toggle, back button, action slots```
// Real-time cart badge via Livewire property
BottomNavigation::make()
    ->tabs(config('mobile-nav.bottom'))
    ->active($this->activeTab)
    ->livewire('switchTab')
    ->badges([
        'cart'          => $this->cartCount,       // Updates reactively
        'notifications' => $this->unreadCount,
    ])
    ->badgeColor('#E53935')
```

---

### ✅ Phase 4 — Data (Q2–Q3 2026)

[](#-phase-4--data-q2q3-2026)

**Goal:** High-performance data rendering using the itemBuilder pattern from Flutter.

**`ListView`** — Closure-based list rendering:

```
ListView::make()
    ->items($this->products)
    ->itemBuilder(function (array $product, int $index): string {
        return Card::make()
            ->title($product['name'])
            ->subtitle('$' . $product['price'])
            ->render();
    })
    ->separator('#f0f0f0')
    ->onScrollEnd('loadMore')   // Livewire infinite scroll
    ->padding('0 16px')
```

---

### 🔜 Phase 5 — Livewire Single-File Components (Q3 2026)

[](#-phase-5--livewire-single-file-components-q3-2026)

**Goal:** `.wire.php` single-file components for reactive native-feel interactions.

- `` — SFC with virtual scroll
- `` — Persistent cart state
- `` — Debounced live search
- NativePHP v3.1 EDGE tag integration for hardware haptics and status bar

---

### 🔜 Phase 6 — Native Bridge (Q4 2026)

[](#-phase-6--native-bridge-q4-2026)

**Goal:** Deep NativePHP v3.1 integration for a true native feel.

- `AndroidBridge` JS interface wrappers (haptics, status bar, camera, file picker)
- Push notification bridge with Livewire event syncing
- `NativeGestureDetector` for swipe, long-press, and pinch

---

🧩 Component Catalogue
---------------------

[](#-component-catalogue)

### Layout

[](#layout)

ClassDescription`AppBar`Fixed top bar with status bar color sync`BottomNavigation`Tab bar with badge counters`NavigationDrawer`Slide-in side menu`Column`Vertical flex layout`Row`Horizontal flex layout`Stack`Layered absolute positioning`Scaffold`Full-screen page shell`Modal`Bottom sheet / dialog### UI

[](#ui)

ClassDescription`TextView`Styled text with typography helpers`Button`Tap targets with haptic feedback`Card`Elevated content container`Image`Lazy-loaded with srcset`Carousel`Touch-swipe with Alpine.js`ListView`itemBuilder list renderer`ProgressBar`Linear or circular`Slider`Range input`Link`Accessible anchors---

🧪 Testing
---------

[](#-testing)

Tests live in `packages/php-mobile-ui/tests/` and run via Pest v4.

```
# From the Laravel app root
php artisan test --compact --filter=mobile-ui

# From the package directory
./vendor/bin/pest
```

**Coverage:**

- `WidgetStylingTest` — 15 tests covering all fluent CSS properties
- `ColumnRowTest` — 14 tests for Column, Row, Stack layouts
- `ListViewTest` — 11 tests for itemBuilder, separators, scroll wiring

---

⚙️ Configuration
----------------

[](#️-configuration)

```
php artisan vendor:publish --tag=mobile-ui-config
```

Edit `config/mobile-ui.php` to define your navigation tabs, brand colors, and NativePHP bridge settings.

---

🏢 Credits
---------

[](#-credits)

Developed and maintained by **Elegant Media** — [elegantmedia.com.au](https://elegantmedia.com.au)

- Mobile commerce platform: **The Appliance Store**
- Architecture: Mobile-first Laravel with Livewire v4
- Target runtime: Android WebView via NativePHP v3.1

---

*Licensed MIT. PHP 8.2+ required.*

###  Health Score

36

—

LowBetter than 79% of packages

Maintenance82

Actively maintained with recent releases

Popularity1

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity46

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

96d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/f4f865aad0bf0e48b395e1f657818d4d7f564c1298f4968749b98e146f84f735?d=identicon)[paravecdesign](/maintainers/paravecdesign)

---

Top Contributors

[![paravecdesign](https://avatars.githubusercontent.com/u/9321768?v=4)](https://github.com/paravecdesign "paravecdesign (3 commits)")

---

Tags

phplaraveluicomponentsmobilelivewireandroidalpinewebview

###  Code Quality

TestsPest

### Embed Badge

![Health badge](/badges/nativemobile-laravel-mobile-ui/health.svg)

```
[![Health](https://phpackages.com/badges/nativemobile-laravel-mobile-ui/health.svg)](https://phpackages.com/packages/nativemobile-laravel-mobile-ui)
```

###  Alternatives

[livewire/flux

The official UI component library for Livewire.

9476.8M121](/packages/livewire-flux)[mediconesystems/livewire-datatables

Advanced datatables using Laravel, Livewire, Tailwind CSS and Alpine JS

1.2k722.0k8](/packages/mediconesystems-livewire-datatables)[okipa/laravel-form-components

Ready-to-use and customizable form components.

198.0k1](/packages/okipa-laravel-form-components)[ympact/flux-icons

A package to provide icons from different vendors for Livewire Flux.

118.7k](/packages/ympact-flux-icons)[tanthammar/livewire-window-size

Laravel blade directives and php helpers for serverside rendered content, based on browser window size WITHOUT css. Requires Livewire and AlpineJS

2323.1k](/packages/tanthammar-livewire-window-size)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)