Built on NativePHP SuperNative

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, strict validation, and server-authoritative state through familiar Blade components. 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.

How Firstlight complements NativePHP Mobile UI →

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.
Consistent product contracts: Stable values, strict validation, field semantics, accessibility evidence, and server-authoritative reconciliation keep behaviour predictable.

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 / 17

View all components

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

Badge

Available

firstlight:badge

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

Explore Badge

Native evidence

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

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

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 →