This page ships a Markdown twin for AI tools.

ComponentsMobileAppFrame

layoutstexulinot agent-emittableapp

MobileAppFrame

mobile-app-frame

A phone-sized app frame: skip link, header, scrolling screen, optional footer and bottom nav. Host chrome; agents never emit it.

Logical CSS, so right-to-left mirrors correctly. Layouts compose with logical CSS properties (inline-size, inset-inline-start), so right-to-left locales mirror without component changes, and full-page layouts render real landmarks (main, banner, contentinfo).

Live examples

Phone frame

Phone frame

Loading demo…

In your theme

This page renders in the site theme, enterprise-neutral. Every one of the 210 library themes re-colors every component through the --tx-* contract. The three below carry real token values from the library, rendered at build — no island, no extra requests.

  • Violet

    light mode · AA contrast

    • background
    • surface
    • primary
    • accent
    • border
    Open Theme Studio

  • Monochrome

    light mode · AA contrast

    • background
    • surface
    • primary
    • accent
    • border
    Open Theme Studio

  • Accessible Dark Contrast

    dark mode · AAA contrast

    • background
    • surface
    • primary
    • accent
    • border
    Open Theme Studio

Props

Public props for MobileAppFrame
NameKindRequiredDefaultDescription
skipLabelstringno——
mainIdstringno——
mainElementenum (main, div)no"main"—
resetScrollOnNavigatebooleannotrue—
stickyFooterUnstyledbooleannofalse—
classstringno——

Keyboard

Keyboard behavior for MobileAppFrame
KeyAction
A, aA skip link to the screen; the screen is a main landmark unless nested.

Accessibility

  • A skip link to the screen; the screen is a main landmark unless nested.

Evidence for mobile-app-frame

Latest committed gates for mobile-app-frame (as of 2026-10-23). Static snapshot — not live CI.

Behavior

n/ano behavior scenario

No dedicated behavior scenario for this catalog id (a styled or display surface, covered by its unit and axe tests).

Size (gzip)

texuli/mobile-app-frame · budget 12.0 KiB

Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.

Axe

documented

  • tests/e2e/site-component-pages.spec.ts
  • docs/quality (a11y-*)

Site component pages axe gate; package-level a11y docs under docs/quality when present.

Browsers

  • chromium
  • webkit
  • mobile

Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.

When to use

Use when

  • The host shell of a phone-sized app

Don’t use when

Prefer another component

  • In-page content (use layout-page)
  • Desktop chrome (use layout-sidebar)