Native by platform. Familiar in Blade.

Firstlight is a curated form and control layer for NativePHP Mobile UI. It builds on Mobile UI’s official SwiftUI and Jetpack Compose foundation, adding stable values, consistent field semantics, Laravel validate(), submit(), and Gate-backed authorize() on native screens, and server-authoritative state through familiar Blade components. NativePHP EDGE does not ship those PHP helpers; Firstlight does. It runs on the SuperNative foundation created by Shane Rosenthal and Simon Hamp.

Start with Firstlight Explore current components →

Authoring: Blade + EDGE
iOS: SwiftUI
Android: Compose
State: PHP-owned

queue.blade.php

EDGE

<firstlight:segmented
    :options="$queues"
    native:model="queue"
    label="Queue"
/>

iOS

SwiftUI

Queue

Mine All

Android

Compose

Queue

✓ Mine All

Built on NativePHP Mobile UI

A focused control layer for the native toolkit.

NativePHP Mobile UI provides the comprehensive native foundation for NativePHP applications. Firstlight builds on it with a smaller, opinionated catalogue for teams that want common form behaviour decided once and reused consistently.

Firstlight vs NativePHP Mobile UI → Read the concept guide

Familiar at the source: Compose controls with Blade tags, Laravel properties, and NativePHP events. No parallel state model to learn.
NativePHP all the way down: Firstlight uses Mobile UI’s ordinary component extension points, inherits its semantic theme, and follows the same SwiftUI and Material 3 approach.
Laravel SuperNative extensions: NativePHP has no screen-level validate(), guarded submit(), or Gate-backed authorize(). Firstlight adds those PHP contracts on native fields and actions.

Laravel SuperNative extensions

NativePHP publishes a tree. Firstlight adds Laravel around it.

NativePHP EDGE has no screen-level validate(), no once-run submit helper, and no Gate-backed action guard. Failed rules, double presses, and unauthorized mutations still fall through to sibling text or the generic overlay. Firstlight adds three PHP concerns on NativeComponent: ValidatesFields, SubmitsForms, and AuthorizesActions.

Validate: NativePHP has no validate(). @nativeError is sibling text, and a thrown ValidationException still hits the overlay. Firstlight binds the first MessageBag message to the field’s native error slot.; $this->validate();
Submit: A NativePHP press is just a PHP method. Firstlight submit() validates, runs the callable once, optionally sends success Feedback, and guards re-entry on the same request.; $this->submit( action: fn () => $profile->save(), successMessage: 'Saved', );
Authorize: NativePHP has no Gate helpers on screens. An uncaught authorization exception still opens the overlay. Firstlight allows(), denies(), and authorize() hide, disable, or send danger Feedback instead.; if (! $this->authorize('update', $post)) { return; }

How-to

Validate fields

Use validate(), validateOnly(), and Form Requests so Laravel messages land on native fields.

Read the validation guide →

How-to

Submit forms

Validate, run a PHP action once, and publish success Feedback without a form schema or overlay.

Read the submit guide →

How-to

Authorize actions

Apply Laravel Gate and Policy decisions with hide, disable, and danger Feedback instead of the overlay.

Read the authorization guide →

Concept

How Firstlight complements NativePHP Mobile UI

See the focused form layer and Laravel-shaped PHP extensions Firstlight adds on Mobile UI.

Read how the catalogues fit →

Current components

Curated controls. Consistent contracts.

Firstlight focuses on form, selection, display, and action controls with stable values, strict validation, and consistent field semantics. The catalogue grows where a reusable product-level contract saves every app from solving the same problem again.

Component gallery 1 / 27

View all components

Activity Indicator

Available

firstlight:activity-indicator

Communicate active work when no meaningful completion value is available with a native indeterminate indicator.

Explore Activity Indicator

Native evidence

Firstlight Activity Indicator rendered on iOS — iOS Native

Firstlight Activity Indicator rendered on iOS in dark mode — iOS Native

Firstlight Activity Indicator rendered on Android — Android Native

Firstlight Activity Indicator rendered on Android in dark mode — Android Native

Button

Available

firstlight:button

Perform one immediate, labelled action with a foundational native control under the Firstlight API.

Explore Button

Native evidence

Firstlight Button rendered on iOS — iOS Native

Firstlight Button rendered on iOS in dark mode — iOS Native

Firstlight Button rendered on Android — Android Native

Firstlight Button rendered on Android in dark mode — Android Native

Callout

Available

firstlight:callout

Keep an important semantic message visible in the page layout with an optional labelled action.

Explore Callout

Native evidence

Firstlight Callout rendered on iOS — iOS Native

Firstlight Callout rendered on iOS in dark mode — iOS Native

Firstlight Callout rendered on Android — Android Native

Firstlight Callout rendered on Android in dark mode — Android Native

Transient Feedback

Available

Feedback::success()

Publish brief app-level outcomes as queued native feedback that persists across normal screen navigation.

Explore Transient Feedback

Native evidence

Firstlight Transient Feedback rendered on iOS — iOS Native

Firstlight Transient Feedback rendered on iOS in dark mode — iOS Native

Firstlight Transient Feedback rendered on Android — Android Native

Firstlight Transient Feedback rendered on Android in dark mode — Android Native

Badge

Available

firstlight:badge

Present a compact, display-only count or short marker with native platform expression.

Explore Badge

Native evidence

Checkbox

Available

firstlight:checkbox

Represent one strict Boolean form or checklist value with server-authoritative native state.

Explore Checkbox

Native evidence

Firstlight Checkbox rendered on iOS — iOS Native

Firstlight Checkbox rendered on iOS in dark mode — iOS Native

Firstlight Checkbox rendered on Android — Android Native

Firstlight Checkbox rendered on Android in dark mode — Android Native

Choice Group

Available

firstlight:choice-group

Show a visible list of labelled options for selecting one value or several values.

Explore Choice Group

Native evidence

Firstlight Choice Group rendered on iOS — iOS Native

Firstlight Choice Group rendered on iOS in dark mode — iOS Native

Firstlight Choice Group rendered on Android — Android Native

Firstlight Choice Group rendered on Android in dark mode — Android Native

Confirmation Dialog

Available

firstlight:confirmation-dialog

Ask for one native confirmation with explicit cancellation and destructive action semantics.

Explore Confirmation Dialog

Native evidence

Firstlight Confirmation Dialog rendered on iOS — iOS Native

Firstlight Confirmation Dialog rendered on iOS in dark mode — iOS Native

Firstlight Confirmation Dialog rendered on Android — Android Native

Firstlight Confirmation Dialog rendered on Android in dark mode — Android Native

Modal

Available

firstlight:modal

Present authored content in a full-screen native overlay with server-controlled dismissal.

Explore Modal

Native evidence

Firstlight Modal rendered on iOS — iOS Native

Firstlight Modal rendered on iOS in dark mode — iOS Native

Firstlight Modal rendered on Android — Android Native

Firstlight Modal rendered on Android in dark mode — Android Native

Bottom Sheet

Available

firstlight:bottom-sheet

Present authored content in a native bottom sheet with server-controlled dismissal.

Explore Bottom Sheet

Native evidence

Firstlight Bottom Sheet rendered on iOS — iOS Native

Firstlight Bottom Sheet rendered on iOS in dark mode — iOS Native

Firstlight Bottom Sheet rendered on Android — Android Native

Firstlight Bottom Sheet rendered on Android in dark mode — Android Native

Date Picker

Available

firstlight:date-picker

Choose an optional calendar date with each platform’s native, server-authoritative picker.

Explore Date Picker

Native evidence

Firstlight Date Picker rendered on iOS — iOS Native

Firstlight Date Picker rendered on iOS in dark mode — iOS Native

Firstlight Date Picker rendered on Android — Android Native

Firstlight Date Picker rendered on Android in dark mode — Android Native

Time Picker

Available

firstlight:time-picker

Choose an optional wall-clock time while keeping the model value exact and server-authoritative.

Explore Time Picker

Native evidence

Firstlight Time Picker rendered on iOS — iOS Native

Firstlight Time Picker rendered on iOS in dark mode — iOS Native

Firstlight Time Picker rendered on Android — Android Native

Firstlight Time Picker rendered on Android in dark mode — Android Native

Icon Button

Available

firstlight:icon-button

Trigger one compact, accessible action through native SwiftUI and Material icon buttons.

Explore Icon Button

Native evidence

iOS Native

Android Native

List Item

Available

firstlight:list-item

Present one tappable application row with supporting text, leading identity, and a trailing affordance.

Explore List Item

Native evidence

Firstlight List Item rendered on iOS — iOS Native

Firstlight List Item rendered on iOS in dark mode — iOS Native

List

Available

firstlight:list

Compose finite vertical collections of List Item rows with optional grouped sections and refresh or pagination hooks.

Explore List

Native evidence

Firstlight List rendered on iOS — iOS Native

Firstlight List rendered on iOS in dark mode — iOS Native

Firstlight List rendered on Android — Android Native

Firstlight List rendered on Android in dark mode — Android Native

List Section

Available

firstlight:list-section

Group List Item rows with optional headers and footers inside a parent List.

Explore List Section

Native evidence

Firstlight List Section rendered on iOS — iOS Native

Firstlight List Section rendered on iOS in dark mode — iOS Native

Firstlight List Section rendered on Android — Android Native

Firstlight List Section rendered on Android in dark mode — Android Native

Pill Group

Available

firstlight:pill-group

Offer compact, individually shaped options for single or multiple selection.

Explore Pill Group

Native evidence

Firstlight Pill Group rendered on iOS — iOS Native

Firstlight Pill Group rendered on iOS in dark mode — iOS Native

Firstlight Pill Group rendered on Android — Android Native

Firstlight Pill Group rendered on Android in dark mode — Android Native

Progress

Available

firstlight:progress

Communicate determinate completion or indeterminate work with the native platform indicator.

Explore Progress

Native evidence

Firstlight Progress rendered on iOS — iOS Native

Firstlight Progress rendered on iOS in dark mode — iOS Native

Firstlight Progress rendered on Android — Android Native

Firstlight Progress rendered on Android in dark mode — Android Native

Segmented

Available

firstlight:segmented

Present a small set of mutually exclusive choices as a genuine native segmented control.

Explore Segmented

Native evidence

Firstlight Segmented rendered on iOS — iOS Native

Firstlight Segmented rendered on iOS in dark mode — iOS Native

Firstlight Segmented rendered on Android — Android Native

Firstlight Segmented rendered on Android in dark mode — Android Native

Search Field

Available

firstlight:search-field

Enter and submit one query with native search, clear, focus, keyboard, and selection behaviour.

Explore Search Field

Native evidence

Firstlight Search Field rendered on iOS — iOS Native

Firstlight Search Field rendered on iOS in dark mode — iOS Native

Firstlight Search Field rendered on Android — Android Native

Firstlight Search Field rendered on Android in dark mode — Android Native

Select

Available

firstlight:select

Choose one stable string or integer value from a collapsed native selection field.

Explore Select

Native evidence

Firstlight Select rendered on iOS — iOS Native

Firstlight Select rendered on iOS in dark mode — iOS Native

Firstlight Select rendered on Android — Android Native

Firstlight Select rendered on Android in dark mode — Android Native

Slider

Available

firstlight:slider

Select one value from an exact numeric grid using each platform’s native slider.

Explore Slider

Native evidence

Firstlight Slider rendered on iOS — iOS Native

Firstlight Slider rendered on iOS in dark mode — iOS Native

Firstlight Slider rendered on Android — Android Native

Firstlight Slider rendered on Android in dark mode — Android Native

Stepper

Available

firstlight:stepper

Move an accepted numeric value through a bounded range one exact step at a time.

Explore Stepper

Native evidence

Firstlight Stepper rendered on iOS — iOS Native

Firstlight Stepper rendered on iOS in dark mode — iOS Native

Firstlight Stepper rendered on Android — Android Native

Firstlight Stepper rendered on Android in dark mode — Android Native

Status Label

Available

firstlight:status-label

Present short display-only metadata or status text as a native semantic capsule.

Explore Status Label

Native evidence

Firstlight Status Label rendered on iOS — iOS Native

Firstlight Status Label rendered on iOS in dark mode — iOS Native

Firstlight Status Label rendered on Android — Android Native

Firstlight Status Label rendered on Android in dark mode — Android Native

Text Field

Available

firstlight:text-field

Edit one line of text with each platform’s native keyboard, autofill, selection, and accessibility behaviour.

Explore Text Field

Native evidence

Firstlight Text Field rendered on iOS — iOS Native

Firstlight Text Field rendered on iOS in dark mode — iOS Native

Firstlight Text Field rendered on Android — Android Native

Firstlight Text Field rendered on Android in dark mode — Android Native

Text Area

Available

firstlight:text-area

Edit multiline text with native selection, composition, focus, scrolling, and correction behaviour.

Explore Text Area

Native evidence

Firstlight Text Area rendered on iOS — iOS Native

Firstlight Text Area rendered on iOS in dark mode — iOS Native

Firstlight Text Area rendered on Android — Android Native

Firstlight Text Area rendered on Android in dark mode — Android Native

Switch

Available

firstlight:switch

Present one boolean setting through each platform’s familiar native on/off control.

Explore Switch

Native evidence

Firstlight Switch rendered on iOS — iOS Native

Firstlight Switch rendered on iOS in dark mode — iOS Native

Firstlight Switch rendered on Android — Android Native

Firstlight Switch rendered on Android in dark mode — Android Native

Firstlight in the NativePHP ecosystem

SuperNative supplies the bridge. Firstlight adds consistent product contracts.

Firstlight uses the same EDGE, Element Tree, shared-memory frame, renderer, theme, and event lifecycle as NativePHP Mobile UI. Ordinary interaction stays on the native UI thread.

01: Blade compiles to a Firstlight element with stable public values.
02: The shared element tree publishes primitive, platform-neutral intent.
03: SwiftUI and Compose renderers express that intent natively.

Quickstart

Add consistent form contracts without leaving NativePHP.

Install Firstlight alongside Mobile UI, then author focused form and action controls with familiar Blade markup.

composer require firstlightui/nativephp

Read the getting started guide →