Component library · Flutter + Astro

The MacroMath UI library

Every component MacroMath uses — the Flutter app and the website — documented, with code and live previews. One system, one brand.

Get startedView on GitHub
Why MacroMath UI

Design tokens, not magic numbers

Colors, spacing, radii, motion and type all come from tokens (AppColors, AppConstants, AppTypography) — one source of truth.

Cross-platform, one brand

Flutter for the app, Astro for the website — documented side by side and sharing the exact same palette and Poppins.

Themed & trilingual

Light and dark themes, full-text search and every page in English, Portuguese and Spanish.

Quickstart

Clone the repo and run the catalogue locally.

git clone https://github.com/rodrigofariarocha/macromath_ui.git
cd macromath_ui/catalog
npm install
npm run dev

Full setup — including the live Widgetbook — in Getting started.

The building blocks

Foundations

Colors, typography, spacing, buttons and macro badges — the tokens every component is built on.

App components

Real Flutter widgets: the macro card, bottom navigation, toasts, dialogs, the tour and the photo picker.

Web components

The Astro pieces of macromath.app: navbar, hero, features, pricing, FAQ, CTA and the site UI.

Explore the library

Getting started

Install, run the catalogue and the Widgetbook, and use your first component.

See more

Introduction

What the library is, how it is organized and where the components come from.

See more

Foundations

The brand palette, the Poppins type scale, spacing, radii, buttons and badges.

See more

Reference

Design tokens, design principles and the changelog.

See more

App components

The shared Flutter widgets imported straight from the mobile app.

See more

Web components

The Astro sections and UI that make up the marketing site.

See more
Featured components

Macro card

Progress of one macronutrient against the day’s target.

Bottom nav bar

The app’s five-destination primary navigation.

Toast & dialogs

Top-of-screen toasts and the unified confirm dialog.

Hero & sections

The landing hero and every section down the page.

Pricing & FAQ

The three plans and the accordion of frequent questions.

Store buttons

App Store and Google Play badges, with variants.

Built with

The same stack and brand as the rest of the MacroMath family.

Open source

The four repositories of the MacroMath ecosystem.