Installation

Flab Mobile ships from the same package as a separate entry — @flabbergasted-ai/react/mobile. The package, token layer and theme provider are set up exactly as for the desktop library; this page covers only what mobile adds on top: the touch entry point, the viewport, safe areas, and the touch-density opt-in.

Flab Mobile shares one package, one token set and one theme provider with the desktop library. If you have not set Flab up yet, follow the main installation guide first — the registry .npmrc, the @flabbergasted-ai/tokens import and FlabThemeProvider are identical. Then come back here for the touch-specific steps.

Import from the mobile entry

Touch components live under the /mobile subpath. They share the token layer with the desktop set, so no extra install or stylesheet import is needed beyond the base setup.

import {  MobileShell,  MobileHeader,  TabBar,  TabBarItem,  BottomSheet,  SnackbarProvider,  snackbar,} from '@flabbergasted-ai/react/mobile';

Set the mobile viewport

Mobile web needs a viewport meta tag, and viewport-fit=cover is what lets content extend under the notch and home indicator so the safe-area insets have room to work. In the Next.js App Router, export a viewport object from the root layout.

// app/layout.tsximport type { Viewport } from 'next';
export const viewport: Viewport = {  width: 'device-width',  initialScale: 1,  viewportFit: 'cover',};

Outside Next.js, the equivalent tag is <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />.

Wrap the screen in MobileShell

MobileShell is the full-height app exterior: a header slot, a scrolling content region and a bottom slot (usually the TabBar). It sets data-flab-touch — the density opt-in — and data-flab-root for portal isolation, so the whole subtree runs at touch density and overlays anchor correctly.

'use client';
import {  MobileShell,  MobileHeader,  TabBar,  TabBarItem,} from '@flabbergasted-ai/react/mobile';
export function AppScreen() {  return (    <MobileShell      header={<MobileHeader title="Wallet" />}      bottom={        <TabBar>          <TabBarItem label="Home" active />          <TabBarItem label="Activity" />          <TabBarItem label="Settings" />        </TabBar>      }    >      {/* scrolling content */}    </MobileShell>  );}

Mount the snackbar provider (optional)

To raise a Snackbar — the touch idiom for a single bottom-anchored message with one optional action, such as undo — wrap the screen in SnackbarProvider and call snackbar() imperatively.

import { SnackbarProvider, snackbar } from '@flabbergasted-ai/react/mobile';
<SnackbarProvider>  <AppScreen /></SnackbarProvider>;
// later, from an event handlersnackbar('Item deleted', { actionLabel: 'Undo', onAction: restore });

Touch density is opt-in

The 44px controls, taller rows and safe-area insets are carried by a token overlay scoped to data-flab-touch. MobileShell sets that attribute for the whole subtree, so a desktop app on a touch laptop stays dense and a single document can host both a dense region and a touch region without either fighting the other.

If you render touch components outside a MobileShell, set the attribute on a wrapping element yourself so they pick up the touch tokens.

<div data-flab-touch>  {/* touch-density components */}</div>

Want to see the pieces assembled? The live skeleton wires the M1 set into one screen — try the tab bar, the filter sheet, and deleting a row to raise a snackbar with undo.