Installation

Install, run and use the MacroMath UI library — the catalogue and the live Widgetbook.

MacroMath UI has two parts: the catalogue you're reading now (a Fumadocs site) and the Widgetbook (the real Flutter widgets, live). Here's how to run both and how to use a component.

Prerequisites

Tool	Version	For
Node.js	`20`+	The catalogue (Fumadocs).
Flutter	`3.x`	The Widgetbook and the app.

Run the catalogue

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

Run the live Widgetbook

cd macromath_ui/widgetbook
flutter pub get
flutter run -d chrome                                   # live dev
flutter build web --release --base-href /widgetbook/   # static build → build/web

Copy widgetbook/build/web to catalog/public/widgetbook to embed it in the docs.

Use a component

Shared widgets are imported directly from the app package (macromath_app):

import 'package:macromath_mobile/presentation/widgets/bottom_nav_bar.dart';

BottomNavBar(
  indiceSelecionado: 0,
  onItemTocado: (i) {},
);

The design tokens come from AppColors, AppConstants and AppTypography:

import 'package:macromath_mobile/core/constants/app_colors.dart';

Container(color: AppColors.accent);

New here? Read Welcome for the big picture, then browse Foundations and the Design tokens reference.

Next steps

Foundations

Colors, typography, spacing, buttons and badges.

Design tokens

Every token in one place — colors, spacing, radii, motion and type.

App components

The shared Flutter widgets.

Web components

The Astro sections and UI.