Generating a UI Kit

What you'll learn

• Generating a design system package with foundations and components
• Customizing the prefix for your brand (e.g., GpButton, AlohaCard)
• Using theme extensions for consistent styling
• Exploring components with the generated Widgetbook app

Prerequisites

• An existing Archipelago monorepo (see Monorepo Scaffolding)
• Basic understanding of Flutter theming (ThemeData, ThemeExtension)

Step 1: Generate the UI Kit

archipelago generate flutter_ui_kit

Answer the prompts:

• appName — MyApp (matches your monorepo name)
• prefix — App (components become AppButton, AppCard, etc.)
• prefixCasing — pascalCase (AppButton) or upperCase (APPButton)
• isForMonorepo — true

Or use a config file:

{
  "appName": "Tokopay",
  "prefix": "Tp",
  "prefixCasing": "pascalCase",
  "isForMonorepo": true,
  "includeGenerated": false
}

archipelago generate flutter_ui_kit --config ui_config.json

This generates TpButton, TpCard, TpTextField, and so on.

Step 2: Explore the Generated Structure

packages/
├── tokopay_ui_kit/
│   ├── lib/src/
│   │   ├── foundations/
│   │   │   ├── colors.dart          # Brand color palette
│   │   │   ├── typography.dart      # Text styles (heading, body, caption)
│   │   │   ├── spacing.dart         # Spacing scale (4, 8, 12, 16, 24...)
│   │   │   ├── radius.dart          # Border radius tokens
│   │   │   └── shadows.dart         # Elevation shadows
│   │   ├── theme/
│   │   │   └── theme_extensions.dart # ThemeExtension registrations
│   │   └── components/
│   │       ├── atoms/               # Buttons, inputs, icons
│   │       ├── molecules/           # Form fields, list tiles
│   │       └── organisms/           # App bars, cards, dialogs
│   └── pubspec.yaml
└── tokopay_ui_kit_widgetbook/
    ├── lib/main.dart                # Widgetbook showcase app
    └── pubspec.yaml

Step 3: Customize Your Foundations

Edit the color palette to match your brand:

// packages/tokopay_ui_kit/lib/src/foundations/colors.dart
abstract final class TpColors {
  static const primary = Color(0xFF6366F1);    // Indigo
  static const secondary = Color(0xFF8B5CF6);  // Violet
  static const success = Color(0xFF22C55E);
  static const error = Color(0xFFEF4444);
  static const surface = Color(0xFFF8FAFC);
  static const onSurface = Color(0xFF1E293B);
}

Typography follows the same pattern:

// packages/tokopay_ui_kit/lib/src/foundations/typography.dart
abstract final class TpTypography {
  static const headingLarge = TextStyle(
    fontSize: 28,
    fontWeight: FontWeight.w700,
    height: 1.2,
  );
  static const bodyMedium = TextStyle(
    fontSize: 14,
    fontWeight: FontWeight.w400,
    height: 1.5,
  );
}

Step 4: Use Theme Extensions

The generated theme extensions let you access your design tokens through Theme.of(context):

// In any widget
final colors = Theme.of(context).extension<TpColorTheme>()!;
final typography = Theme.of(context).extension<TpTypographyTheme>()!;

Text(
  'Hello',
  style: typography.headingLarge.copyWith(color: colors.primary),
);

Register extensions in your app theme:

ThemeData(
  extensions: [
    TpColorTheme.light(),
    TpTypographyTheme.standard(),
    TpSpacingTheme.standard(),
  ],
);

Step 5: Run the Widgetbook

The Widgetbook app provides a visual catalog of all your components:

cd packages/tokopay_ui_kit_widgetbook
flutter run -d chrome

Every atom, molecule, and organism component has a Widgetbook use case with configurable knobs for props, themes, and states.

Step 6: Add New Components

Use the ui_kit_component brick to add individual components:

archipelago generate ui_kit_component

Set useHeadless: true for components that need variants, sizes, and data classes. This generates a component file in the correct atomic design directory with test and widgetbook showcase.

Prefix Naming in Practice

The prefix is fully customizable per project. Here are real-world examples:

Company	Prefix	Result
GoPay	Gp	GpButton, GpCard
Tokopedia	Tkpd	TkpdButton, TkpdCard
Generic	App	AppButton, AppCard

This ensures your design system components are instantly recognizable in any codebase.

Next Steps

• Set up networking to connect your UI to APIs
• Add authentication with themed login pages