PHPackages                             johntrickett86/tall-mobile - 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. [Framework](/categories/framework)
4. /
5. johntrickett86/tall-mobile

AbandonedArchivedLibrary[Framework](/categories/framework)

johntrickett86/tall-mobile
==========================

TALL preset for Laravel with mobile UI components

v1.0.1(1y ago)1131MITBladePHP ^8.2

Since Jul 11Pushed 1y ago1 watchersCompare

[ Source](https://github.com/johntrickett86/tall-mobile)[ Packagist](https://packagist.org/packages/johntrickett86/tall-mobile)[ RSS](/packages/johntrickett86-tall-mobile/feed)WikiDiscussions master Synced 1mo ago

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

Laravel TALL Preset with Mobile Elements
========================================

[](#laravel-tall-preset-with-mobile-elements)

[![Latest Version on Packagist](https://camo.githubusercontent.com/0bee70a2e6d0b954e4d0a6a4b8f3709ddf41bc5ecd80dcc2451377aa841032a4/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6a6f686e747269636b65747438362f74616c6c2d6d6f62696c652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/stitch-digital/laravel-simpro-api)[![Total Downloads](https://camo.githubusercontent.com/2bab2f2bc3d5321f0e8c98fb436779886f19ae8e0fab29dca67204a894a557ed/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6a6f686e747269636b65747438362f74616c6c2d6d6f62696c652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/johntrickett86/tall-mobile)

The TALL stack preset you know and love - with a few extra mobile elements.

If you're not familiar with the name, it's an acronym that describes the main technologies involved in the stack:

- [Tailwind CSS](https://tailwindcss.com)
- [Alpine.js](https://alpinejs.dev/)
- [Laravel](https://laravel.com)
- [Livewire](https://livewire.laravel.com)

[![Mobile View](./screenshot.png)](./screenshot.png)

Some notable features of this package include:

- Everything you know and love from the Laravel TALL Preset package
- A mobile UI experience
- Floating action button
- Theme selector (System, Light, Dark)
- Ability to hide header and toolbar when scrolling

> **Note**: If you're looking for an application boilerplate that supports the TALL stack, you should check out [Laravel Jetstream](https://github.com/laravel/jetstream). It comes with authentication scaffolding, account management, teams support.

Installation
------------

[](#installation)

This preset is intended to be installed into a fresh Laravel application. Follow [Laravel's installation instructions](https://laravel.com/docs/installation) to ensure you have a working environment before continuing.

### Installation (without auth)

[](#installation-without-auth)

Then simply run the following commands:

```
composer require livewire/livewire johntrickett86/tall-mobile
php artisan ui tall
npm install
npm run dev
```

### Installation (with auth)

[](#installation-with-auth)

If you would like to install the preset and its auth scaffolding in a fresh Laravel application, make sure to use the `--auth` flag on the `ui` command:

```
composer require livewire/livewire johntrickett86/tall-mobile
php artisan ui tall --auth
php artisan migrate
npm install
npm run dev
```

Some notable features of the authentication scaffolding include:

- Powered by Livewire components and single action controllers
- Bundled with pre-written tests

All routes, components, controllers and tests are published to your application. The idea behind this is that you have full control over every aspect of the scaffolding in your own app, removing the need to dig around in the vendor folder to figure out how things are working.

CSS purging
-----------

[](#css-purging)

Tailwind uses PurgeCSS to remove any unused classes from your production CSS builds. You can modify or remove this behaviour in the `purge` section of your `tailwind.config.js` file. For more information, please see the [Tailwind documentation](https://tailwindcss.com/docs/controlling-file-size/).

Removing the package
--------------------

[](#removing-the-package)

If you don't want to keep this package installed once you've installed the preset, you can safely remove it. Unlike the default Laravel presets, this one publishes all the auth logic to your project's `/app` directory, so it's fully redundant.

### A note on pagination

[](#a-note-on-pagination)

If you are using pagination, you set the default pagination views to the ones provided in the `boot` method of a service provider:

```
use Illuminate\Pagination\Paginator;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
        Paginator::defaultView('pagination::default');

        Paginator::defaultSimpleView('pagination::simple-default');
    }
}
```

Mobile Elements
===============

[](#mobile-elements)

Icons
-----

[](#icons)

This package uses the [Blade Tabler Icons](https://github.com/ryangjchandler/blade-tabler-icons) package by [Ryan Chandler](https://github.com/ryangjchandler).

You'll notice that we pass icon names through various props - it is Tabler icon names that we are using, however you can use any icon set you like.

Check out the available icons on the [Tabler Icons website](https://tabler.io/icons).

Header Components
-----------------

[](#header-components)

There are two header components included in this package.

### Main Header

[](#main-header)

The first is the `mobile-header-main` component, which is the default header component designed to be show on the main page of the application.

It includes a section for customising menu items, including a dropdown menu:

[![Main Header](./main-header.png)](./main-header.png)

This component has a prop that can be used to dynamically hide the header when scrolling:

```
 // hides the header when scrolling down
 // fixes the header to the top of the page
```

### Page Header

[](#page-header)

The second header component is the `mobile-header-page` component, which also allows for customised header items. You can use this as a template to create additional page headers and rename them accordingly.

[![Page Header](./page-header.png)](./page-header.png)

This component has the same prop as the main header, but also the ability to customise the title:

```
 // hides the header when scrolling down
 // fixes the header to the top of the page
```

Toolbar
-------

[](#toolbar)

The toolbar component is designed to be used at the bottom of the page and includes an optional floating action button.

[![Toolbar](./toolbar.png)](./toolbar.png)

### Toolbar Navigation Items

[](#toolbar-navigation-items)

You can update the toolbar items by updating the mobile-toolbar blade component:

```
// Update the number of grid columns to match the number of toolbar items

```

### Floating Action Button

[](#floating-action-button)

The floating action button is an optional element that can be included in the toolbar. It is designed to be used as a primary action button for the page.

There are some props you can pass to the component:

```
// Modal Example

// Link Example

```

> **Important note about modals**:
>
> When specifying a modal name, this should match a blade component in the `resources/views/modals` directory. We have put a blank one in there to get you going.

Settings Page
-------------

[](#settings-page)

We have also included a skeleton settings page.

[![Settings Page](./settings.png)](./settings.png)

### User and Avatar

[](#user-and-avatar)

If a user is logged in, the user's name and avatar will be displayed in the header. If no user is logged in, a default avatar will be shown.

We have added a migration to include 'avatar\_url' to the users table.

> **Remember**: To use the avatar\_url, update your user model to make this field fillable!

### Theme Selector

[](#theme-selector)

Switches the theme between System, Light and Dark.

[![Theme](./theme.gif)](./theme.gif)

Theme Customisation
-------------------

[](#theme-customisation)

The theme is customisable by updating the `tailwind.config.js` file. We have based the colors on named colors which can be easily updated:

```
theme: {
    extend: {
        colors: {
            transparent: 'transparent',
                current: 'currentColor',
                primary: colors.indigo,
                secondary: colors.emerald, // not currently used
                danger: colors.red, // not currently used
                success: colors.green, // not currently used
                warning: colors.amber, // not currently used
                info: colors.blue, // not currently used
                light: colors.slate,
        },
    },
},

```

Replacing the primary or light color will reflect in the current Tailwind styles.

Credits
-------

[](#credits)

- [John Trickett](https://github.com/johntrickett86)
- [Dan Harrin](https://github.com/DanHarrin) for the TALL stack preset package this is based on
- [Liam Hammett](https://github.com/imliam) for the TALL stack preset package this is based on
- [Ryan Chandler](https://github.com/ryangjchandler) for the TALL stack preset package this is based on and for the wonderful Blade Tabler Icons package
- [Tailwind UI](https://tailwindui.com) for the default authentication and pagination views
- [All Contributors](../../contributors)

###  Health Score

28

—

LowBetter than 54% of packages

Maintenance33

Infrequent updates — may be unmaintained

Popularity8

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity54

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

Every ~0 days

Total

2

Last Release

669d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/1afc3eb4b0906148c94893fc2c76a6832d3c5f6499f6f9ab223ec6d945ee95da?d=identicon)[johntrickett](/maintainers/johntrickett)

---

Top Contributors

[![johntrickett86](https://avatars.githubusercontent.com/u/149476912?v=4)](https://github.com/johntrickett86 "johntrickett86 (13 commits)")

---

Tags

laravellivewiretailwindalpinetailwindcssalpinejspresettailwinduitall

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/johntrickett86-tall-mobile/health.svg)

```
[![Health](https://phpackages.com/badges/johntrickett86-tall-mobile/health.svg)](https://phpackages.com/packages/johntrickett86-tall-mobile)
```

###  Alternatives

[laravel-frontend-presets/tall

TALL preset for Laravel.

2.6k692.9k1](/packages/laravel-frontend-presets-tall)[robsontenorio/mary

Gorgeous UI components for Livewire powered by daisyUI and Tailwind

1.5k454.7k15](/packages/robsontenorio-mary)[camya/filament-title-with-slug

TitleWithSlugInput - Easy Permalink Slugs for the FilamentPHP Form Builder (PHP / Laravel / Livewire)

13444.5k](/packages/camya-filament-title-with-slug)[developermithu/tallcraftui

TallCraftUI is a Laravel blade UI components library built on TALL stack

1672.4k](/packages/developermithu-tallcraftui)[blendbyte/filament-title-with-slug

TitleWithSlugInput - Easy Permalink Slugs for the FilamentPHP Form Builder (PHP / Laravel / Livewire)

1322.4k3](/packages/blendbyte-filament-title-with-slug)

PHPackages © 2026

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