Skip to main content
Firstlight / NativePHP

Component catalogue

Native-first alternatives, in familiar Blade.

Firstlight wraps familiar NativePHP patterns, offers alternative implementations where platform-native expression matters, and provides a base for richer app building blocks.

Activity Indicator

Available
firstlight:activity-indicator

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

Read the docs
iOS Native
Firstlight Activity Indicator rendered on iOS
Android Native
Firstlight Activity Indicator rendered on Android

Button

Available
firstlight:button

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

Read the docs
iOS Native
Firstlight Button rendered on iOS
Android Native
Firstlight Button rendered on Android

Callout

Available
firstlight:callout

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

Read the docs
iOS Native
Firstlight Callout rendered on iOS
Android Native
Firstlight Callout rendered on Android

Transient Feedback

Available
Feedback::success()

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

Read the docs
iOS Native
Firstlight Transient Feedback rendered on iOS
Android Native
Firstlight Transient Feedback rendered on Android

Badge

Available
firstlight:badge

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

Read the docs
iOS Native
Firstlight Badge rendered on iOS
Android Native
Firstlight Badge rendered on Android

Checkbox

Available
firstlight:checkbox

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

Read the docs
iOS Native
Firstlight Checkbox rendered on iOS
Android Native
Firstlight Checkbox rendered on Android

Choice Group

Available
firstlight:choice-group

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

Read the docs
iOS Native
Firstlight Choice Group rendered on iOS
Android Native
Firstlight Choice Group rendered on Android
firstlight:confirmation-dialog

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

Read the docs
iOS Native
Firstlight Confirmation Dialog rendered on iOS
Android Native
Firstlight Confirmation Dialog rendered on Android

Modal

Available
firstlight:modal

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

Read the docs
iOS Native
Firstlight Modal rendered on iOS
Android Native
Firstlight Modal rendered on Android

Bottom Sheet

Available
firstlight:bottom-sheet

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

Read the docs
iOS Native
Firstlight Bottom Sheet rendered on iOS
Android Native
Firstlight Bottom Sheet rendered on Android

Date Picker

Available
firstlight:date-picker

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

Read the docs
iOS Native
Firstlight Date Picker rendered on iOS
Android Native
Firstlight Date Picker rendered on Android

Time Picker

Available
firstlight:time-picker

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

Read the docs
iOS Native
Firstlight Time Picker rendered on iOS
Android Native
Firstlight Time Picker rendered on Android

Icon Button

Available
firstlight:icon-button

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

Read the docs
iOS Native
Firstlight Icon Button rendered on iOS
Android Native
Firstlight Icon Button rendered on Android

List Item

Available
firstlight:list-item

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

Read the docs
iOS Native
Firstlight List Item rendered on iOS
Android Native
Firstlight List Item rendered on Android

List

Available
firstlight:list

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

Read the docs
iOS Native
Firstlight List rendered on iOS
Android Native
Firstlight List rendered on Android

List Section

Available
firstlight:list-section

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

Read the docs
iOS Native
Firstlight List Section rendered on iOS
Android Native
Firstlight List Section rendered on Android

Pill Group

Available
firstlight:pill-group

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

Read the docs
iOS Native
Firstlight Pill Group rendered on iOS
Android Native
Firstlight Pill Group rendered on Android

Progress

Available
firstlight:progress

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

Read the docs
iOS Native
Firstlight Progress rendered on iOS
Android Native
Firstlight Progress rendered on Android

Segmented

Available
firstlight:segmented

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

Read the docs
iOS Native
Firstlight Segmented rendered on iOS
Android Native
Firstlight Segmented rendered on Android

Search Field

Available
firstlight:search-field

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

Read the docs
iOS Native
Firstlight Search Field rendered on iOS
Android Native
Firstlight Search Field rendered on Android

Select

Available
firstlight:select

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

Read the docs
iOS Native
Firstlight Select rendered on iOS
Android Native
Firstlight Select rendered on Android

Slider

Available
firstlight:slider

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

Read the docs
iOS Native
Firstlight Slider rendered on iOS
Android Native
Firstlight Slider rendered on Android

Stepper

Available
firstlight:stepper

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

Read the docs
iOS Native
Firstlight Stepper rendered on iOS
Android Native
Firstlight Stepper rendered on Android

Status Label

Available
firstlight:status-label

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

Read the docs
iOS Native
Firstlight Status Label rendered on iOS
Android Native
Firstlight Status Label rendered on Android

Text Field

Available
firstlight:text-field

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

Read the docs
iOS Native
Firstlight Text Field rendered on iOS
Android Native
Firstlight Text Field rendered on Android

Text Area

Available
firstlight:text-area

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

Read the docs
iOS Native
Firstlight Text Area rendered on iOS
Android Native
Firstlight Text Area rendered on Android

Switch

Available
firstlight:switch

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

Read the docs
iOS Native
Firstlight Switch rendered on iOS
Android Native
Firstlight Switch rendered on Android