Flab Mobile
v0.0.2The touch-first extension of Flab UI for mobile web. Same design language, same tokens, same stack — with density and interaction rewritten for the finger.
Install
Flab Mobile ships from the same package as a separate entry. Import touch components from @flabbergasted-ai/react/mobile; they share the token layer with the desktop set. See Installation for the viewport, safe-area and touch-density setup.
import { MobileShell, MobileHeader, TabBar, TabBarItem, BottomSheet, SnackbarProvider, snackbar,} from '@flabbergasted-ai/react/mobile';Components
Touch primitives
Button and Input at the 44px touch size — the shared primitives, tuned for the finger.
Mobile shell
The full-height app exterior: header slot, scrolling content, bottom slot.
Mobile header
Top chrome with a back affordance, a centered title and one primary action.
Safe area
Pads content clear of the notch and home indicator via the safe-area tokens.
Tab bar
Bottom navigation for top-level sections, with an accent active state.
Scroll tabs
A horizontally scrollable tab strip for longer filter sets than a SegmentedControl can hold.
Action button
An icon in a rounded tile with a label beneath it — the quick-action affordance for headers and dashboards.
Form controls
Checkbox, Radio, Switch and Textarea with a 44px touch hit area.
Segmented control
A single choice across 2–4 segments, with radiogroup semantics.
Select
The mobile form Select — single or multiple choice in a bottom sheet.
Date select
The mobile date picker — a single day or a range in a bottom sheet.
Stepper
Adjust a small number with − and + buttons; a spinbutton under the hood.
List
The mobile counterpart to DataTable — records as full-width rows, with a skeleton state.
Progress stat
A labelled goal row with a filled pill on a dotted track; the touch idiom for quantified progress.
Price change
A signed delta with a direction arrow and semantic tone — the recurring finance indicator.
Coin icon
A circular token badge for currencies or assets, with a deterministic colour when no brand is given.
Audio waveform
A stylised playback scrubber for voice moments, coloured by speaker with tap-and-drag scrubbing.
Swipe action
Row actions on a left swipe, mirrored in an accessible overflow menu.
Pull to refresh
Pull a scroll region to refresh, with a keyboard-operable button equivalent.
Bottom sheet
A modal surface that rises from the bottom edge — the touch idiom for dialogs and menus.
Action sheet
A short list of actions from the bottom edge — the touch idiom for a menu.
Filter sheet
List filters in a bottom sheet behind a trigger that shows the active count.
Snackbar
A single bottom-anchored message with one optional action, such as undo.