Getting started
Welcome
What the MacroMath UI component library is and how it is organized.
MacroMath UI brings together, in one place, every component the MacroMath product uses — from the Flutter app to the marketing website — each with a description, its properties, code and a live preview.
How it is organized
- Foundations — the base blocks: brand colors, the type scale, spacing and radii, buttons and macro badges.
- Components · App — complete Flutter pieces: the macro card, the bottom navigation, toasts, the confirm dialog, the onboarding tour and the photo picker.
- Components · Web — the Astro sections and UI of
macromath.app. - Widgetbook — the real Flutter widgets, interactive, running in the browser.
Two layers that work together
| Layer | What it is |
|---|---|
| Catalogue (this site) | Documentation: description, props and code for each component. |
| Widgetbook | The real components rendered live, with knobs and light/dark themes. |
Where the components come from
The shared widgets (BottomNavBar, toast, confirm dialog) are imported directly
from the app (macromath_mobile). Components that live inline inside app pages are
recreated as primitives using the same design tokens (AppColors, Poppins), so
they look visually identical. The web components live in macromath_web.
Start with Foundations → Colors or jump straight to the live Widgetbook.