Setting Up the UI Kit Generator

What you'll learn

• Adding ui-kit and theme-variant commands to your monorepo toolkit
• Scaffolding components from the CLI without manual prompts
• Batch-generating multiple components
• Managing theme variants from the command line

Prerequisites

• An existing Archipelago monorepo (see Monorepo Scaffolding)
• Monorepo Toolkit already generated (see Monorepo Toolkit Setup)
• UI Kit already generated (see UI Kit Setup)

Step 1: Generate the UI Kit Generator

archipelago generate ui_kit_generator

You will be prompted for:

• appName — MyApp (must match your monorepo app name)
• isForMonorepo — true

Or use a config file:

{
  "appName": "MyApp",
  "isForMonorepo": true
}

archipelago generate ui_kit_generator --config uikit_gen_config.json

Step 2: Understand the Generated Structure

The generator adds commands to your existing monorepo toolkit:

devtools/
├── monorepo_toolkit/
│   └── lib/src/commands/
│       ├── ui_kit_command.dart          # Scaffold components
│       └── theme_variant_command.dart   # Generate theme variants
└── scripts/
    └── ui_kit_generator/
        ├── lib/src/
        │   ├── component_scaffolder.dart  # Component generation logic
        │   └── theme_scaffolder.dart      # Theme generation logic
        └── pubspec.yaml

Step 3: Scaffold a Component via CLI

Instead of running archipelago generate ui_kit_component with interactive prompts, use the toolkit command:

monorepo_toolkit ui-kit create button \
  --atomic-type atom \
  --widget-type stateful \
  --prefix App \
  --variants \
  --sizes \
  --types

This is equivalent to generating a component brick but faster for batch workflows.

Step 4: Generate a Theme Variant

monorepo_toolkit theme-variant create high_contrast \
  --prefix App \
  --base-theme light \
  --color-overrides \
  --typography-overrides

Step 5: Batch Scaffolding

Create a manifest file for generating multiple components at once:

# ui_components.yaml
components:
  - name: button
    atomic_type: atom
    widget_type: stateful
    variants: true
    sizes: true
    types: true
  - name: card
    atomic_type: molecule
    widget_type: stateless
    variants: true
    sizes: false
    types: false
  - name: dialog
    atomic_type: molecule
    widget_type: stateful
    variants: false
    sizes: true
    types: false

monorepo_toolkit ui-kit batch --config ui_components.yaml

Common Customizations

Customization	Where to Change
Default prefix	Configure in toolkit settings
Component templates	scripts/ui_kit_generator/lib/src/
Custom atomic levels	Extend component_scaffolder.dart
Post-generation hooks	Add barrel export updates

Next Steps

• Create a UI component to understand the generated output
• Add theme variants using the generated CLI commands