App Components

Purpose

App Components are the building blocks of the application. They are used to define the structure and behavior of the application.

Layout Components

Layout components are used to define the layout of the application.

• Layout Component
• Tabs Component

Container Components

Container components provide structured layouts and widget management capabilities.

• Dashboard Component - Grid-based dashboard with toolbar inputs and resizable widgets
• Dashboard Widget Component - Widget container for use within dashboards

Element Components

Element components are used to render text, links, and other simple elements.

• Element Components
• Text Component
• Button Component
• Collection Component
• List Component

Display Components

Display components are used to render and preview various types of content.

• Viewer Component - Display documents (PDF) and images with optional download functionality
• Map Component - Display Google Maps markers from explicit marker data or dispatch route stops

Form Components

Form components are used to define the form of the application.

• Form Component
• Field Component

Variables

Variables are used to store the state of the application. Route parameters, query parameters, and form fields are stored as variables.

Theme Notes

Toggle button groups default to the primary color. Medium toggle buttons render at a fixed 39px height so filter chips, density controls, and segmented controls align consistently with adjacent form controls.

On phones, dialog and card chrome keeps its vertical spacing but tightens side gutters. DataGrid pagination also uses narrower inline padding and a smaller page-size select below the MUI sm breakpoint, so embedded grids have the same usable width inside dialogs as they do on full-page mobile screens.

The mobile renderer supports page-level toolbars on fetched app components. It reads props.toolbar (or layout.props.toolbar) and renders the toolbar above the layout. A toolbar on an inline component remains owned by that component, so a DataGrid toolbar is not duplicated at page level.

Mobile translates the non-selector portion of MUI-style sx objects to Tamagui styles for buttons, cards, rows, columns, text, layouts, cameras, progress bars, and timelines. It also reads options.sx. CSS selectors, pseudo-selectors, and media-query keys are ignored because they cannot be applied directly by the native renderer. Pixel spacing strings such as "12px" become numeric native spacing values. Layouts additionally apply containerSx to the wrapping row and itemDefaults.sx to each child container.