Flab Mobilev0.0.2
Flab UI docs

Mobile shell

The full-height touch application exterior. MobileShell stacks a fixed header slot, a single scrolling content region, and a fixed bottom slot — and turns on touch density for everything inside it.

<SnackbarProvider>  <MobileShell    header={<MobileHeader title="Home" />}    bottom={      <TabBar aria-label="Sections">        <TabBarItem icon={<Home />} label="Home" active />        <TabBarItem icon={<Inbox />} label="Inbox" />        <TabBarItem icon={<User />} label="Me" />      </TabBar>    }  >    {/* scrolling content */}  </MobileShell></SnackbarProvider>

Live

Responsibilities

  • Sets data-flab-touch so the 44px control tokens and mobile chrome tokens resolve for the whole subtree.
  • Sets data-flab-root so Base UI popups portalled by BottomSheet and Snackbar always paint above content.
  • Owns the scroll: the content region scrolls while the header and bottom slots stay fixed. Safe-area insets belong to the chrome in the slots, so the shell never double-pads.

Props

PropTypeDefaultNotes
headerReactNode—Fixed top chrome, e.g. a MobileHeader.
bottomReactNode—Fixed bottom chrome, e.g. a TabBar.
childrenReactNode—The scrolling content region.