PHPackages nativeblade/ui-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. [Templating & Views](/categories/templating) 4. / 5. nativeblade/ui-mobile ActiveLibrary[Templating & Views](/categories/templating) nativeblade/ui-mobile ===================== Mobile UI components for NativeBlade. Konsta-style iOS and Material 3 Blade components that auto-switch theme based on the running platform. v1.1.0(2w ago)334MITBladePHP ^8.2 Since May 5Pushed 2w agoCompare [ Source](https://github.com/NativeBlade/ui-mobile)[ Packagist](https://packagist.org/packages/nativeblade/ui-mobile)[ RSS](/packages/nativeblade-ui-mobile/feed)WikiDiscussions main Synced 1w ago READMEChangelogDependencies (3)Versions (11)Used By (0) NativeBlade UI Mobile ===================== [](#nativeblade-ui-mobile) Konsta-style iOS and Material 3 components for [NativeBlade](https://github.com/nativeblade) apps. Pure Blade, pure Tailwind, no JS framework dependency. Components auto-detect the host platform via `NativeBlade::isIos()` / `NativeBlade::isAndroid()` and render the matching look. Install ------- [](#install) ``` composer require nativeblade/ui-mobile ``` The service provider auto-registers via Laravel package discovery. Required: tell Tailwind to scan the package ------------------------------------------- [](#required-tell-tailwind-to-scan-the-package) This is the most important setup step. Tailwind 4 only generates classes it sees in scanned source files. Open your project's `resources/css/app.css` and add this line near the other `@source` entries: ``` @source '../../vendor/nativeblade/ui-mobile/resources/views/**/*.blade.php'; ``` Without this line, components render but most utility classes (colors, dynamic widths, etc.) come out unstyled or transparent because Tailwind never sees them. Recommended: extend the safelist for opacity modifiers ------------------------------------------------------ [](#recommended-extend-the-safelist-for-opacity-modifiers) NativeBlade's stub `tailwind-safelist.css` already covers solid colors and spacing. The ui-mobile components additionally use opacity modifiers (`bg-black/50`, `bg-{color}/15`) and a few arbitrary font sizes. If you started a new NativeBlade project recently the stub already includes these. If your `app.css` predates the update, add this section: ``` @source inline("bg-black/{5,10,15,20,25,30,40,50,60,70,80,90}"); @source inline("bg-white/{5,10,15,20,25,30,40,50,60,70,75,80,85,90,95}"); @source inline("{bg,text,border}-{slate,gray,zinc,neutral,stone,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{500,600}/{5,10,15,20,30,40,50}"); @source inline("text-[10px]"); @source inline("text-[11px]"); @source inline("text-[13px]"); @source inline("text-[15px]"); @source inline("text-[17px]"); @source inline("{backdrop-blur-none,backdrop-blur-sm,backdrop-blur,backdrop-blur-md,backdrop-blur-lg,backdrop-blur-xl}"); ``` Configure (optional) -------------------- [](#configure-optional) Publish the config to override defaults: ``` php artisan vendor:publish --tag=nb-ui-mobile-config ``` ``` return [ 'theme' => 'ios', 'force' => false, 'colors' => [ 'ios' => ['primary' => 'blue-500', 'primary_text' => 'white'], 'material' => ['primary' => 'indigo-600', 'primary_text' => 'white'], ], ]; ``` Usage ----- [](#usage) ``` Continue ``` On iOS, the button is rounded with iOS sizing. On Android, Material 3 pill with shadow. Same Blade markup. Per-component theme override ---------------------------- [](#per-component-theme-override) ``` Always Material Always iOS ``` Triggering modals ----------------- [](#triggering-modals) Place the modal anywhere in the page (drawer, sheet, popup, action-sheet, toast, popover). To open or close, call the global `nb.*` helper from any element: ``` Menu Close Save More ``` API: - `nb.open(kind, id, extra?)` opens a drawer / sheet / popup / action-sheet - `nb.close(kind, id?)` closes (id optional, closes any of that kind) - `nb.toast(id, message, opts?)` triggers a toast with a message - `nb.popover(id, anchor)` opens a popover anchored to an element Components ---------- [](#components) Each component has its own doc page in `docs/`. Quick reference: **Layout:** [page](docs/page.md), [navbar](docs/navbar.md), [tabbar](docs/tabbar.md), [drawer](docs/drawer.md), [toolbar](docs/toolbar.md), [fab](docs/fab.md) **Containers:** [card](docs/card.md), [block](docs/block.md), [list](docs/list.md), [menu-item](docs/menu-item.md), [sheet](docs/sheet.md), [popup](docs/popup.md), [action-sheet](docs/action-sheet.md), [popover](docs/popover.md), [tabs](docs/tabs.md) **Inputs:** [input](docs/input.md), [searchbar](docs/searchbar.md), [checkbox](docs/checkbox.md), [radio](docs/radio.md), [toggle](docs/toggle.md), [stepper](docs/stepper.md), [range](docs/range.md), [segmented](docs/segmented.md), [file-upload](docs/file-upload.md) **Display:** [button](docs/button.md), [chip](docs/chip.md), [badge](docs/badge.md), [avatar](docs/avatar.md), [link](docs/link.md), [icon](docs/icon.md), [preloader](docs/preloader.md), [progressbar](docs/progressbar.md), [skeleton](docs/skeleton.md), [toast](docs/toast.md), [tooltip](docs/tooltip.md), [empty-state](docs/empty-state.md) **Behaviour:** [pull-to-refresh](docs/pull-to-refresh.md) Customization ------------- [](#customization) **Class merge** (most common): ``` Custom ``` **Color, variant, size, etc. as props:** ``` Big rounded green tonal ``` **Force theme globally:** edit `config/nb-ui-mobile.php` with `'force' => true, 'theme' => 'material'`. **Fork a component** (full control of markup): ``` php artisan vendor:publish --tag=nb-ui-mobile-views ``` Files land at `resources/views/vendor/nb-ui-mobile/components/`. Laravel uses these instead of the package versions. License ------- [](#license) MIT ### Health Score 45 — FairBetter than 91% of packages Maintenance97 Actively maintained with recent releases Popularity14 Limited adoption so far Community6 Small or concentrated contributor base Maturity52 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 ~2 days Total 10 Last Release 16d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/45333690?v=4)[Jefferson T.S](/maintainers/jeffleyd)[@jeffleyd](https://github.com/jeffleyd) --- Top Contributors [![jeffleyd](https://avatars.githubusercontent.com/u/45333690?v=4)](https://github.com/jeffleyd "jeffleyd (9 commits)") --- Tags laraveluiblademobiletailwindiosmaterialnativeblade ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/nativeblade-ui-mobile/health.svg) ``` [![Health](https://phpackages.com/badges/nativeblade-ui-mobile/health.svg)](https://phpackages.com/packages/nativeblade-ui-mobile) ``` ### Alternatives [robsontenorio/mary Gorgeous UI components for Livewire powered by daisyUI and Tailwind 1.5k531.0k21](/packages/robsontenorio-mary)[hasinhayder/tyro-login Tyro Login - Beautiful, customizable authentication views for Laravel 12 & 13 2443.7k5](/packages/hasinhayder-tyro-login)[technikermathe/blade-lucide-icons A package to easily make use of Lucide icons in your Laravel Blade views. 18379.7k9](/packages/technikermathe-blade-lucide-icons)[ddfsn/blade-components Blade Components is a hand-crafted, UI component library for building consistent web experiences in Laravel apps. 234.6k](/packages/ddfsn-blade-components)[electrik/slate Slate - a Laravel Blade UI Kit is a set of anonymous blade components built using TailwindCSS v4 with built-in dark mode support for your next Laravel project 102.4k1](/packages/electrik-slate) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)