ui_kit_component Free

Scaffolds a UI component with optional headless architecture, widget test, and widgetbook showcase.

Version: 3.0.0

Replaces flutter_ui_component

This brick replaces the old flutter_ui_component brick. Set useHeadless: false for simple components or useHeadless: true for headless architecture with data classes and enums.

Variables

Variable	Type	Default	Description
appName	string	MyApp	Application name
prefix	string	—	Unique prefix for component naming
componentName	string	—	The name of the UI component (e.g., Button, Card, Dialog)
atomicType	enum (atoms, molecules, organisms, templates, pages)	atoms	The atomic design level
widgetType	enum (stateless, stateful)	stateless	The type of Flutter widget to generate
useHeadless	boolean	false	Whether to generate a headless base class with state management
hasVariants	boolean	true	Whether the component has style variants (primary, secondary, etc.)
hasSizes	boolean	true	Whether the component has size variants (sm, md, lg)
hasTypes	boolean	false	Whether the component has type variants (filled, outline, ghost)
isForMonorepo	boolean	true	Whether this is for a monorepo structure

Usage

Interactive

archipelago generate ui_kit_component

Non-interactive (CI)

archipelago generate ui_kit_component --config my_config.json

Config Template

{
  "@appName": "Application name",
  "appName": "MyApp",
  "@prefix": "Unique prefix for component naming",
  "prefix": "App",
  "@componentName": "The name of the UI component",
  "componentName": "Button",
  "@atomicType": "The atomic design level (atoms | molecules | organisms | templates | pages)",
  "atomicType": "atoms",
  "@widgetType": "The type of Flutter widget (stateless | stateful)",
  "widgetType": "stateless",
  "@useHeadless": "Whether to use headless architecture with data classes and enums",
  "useHeadless": false,
  "@hasVariants": "Whether the component has style variants (primary, secondary, etc.)",
  "hasVariants": true,
  "@hasSizes": "Whether the component has size variants (sm, md, lg)",
  "hasSizes": true,
  "@hasTypes": "Whether the component has type variants (filled, outline, ghost)",
  "hasTypes": false,
  "@isForMonorepo": "Whether this is for a monorepo structure",
  "isForMonorepo": true
}

Generated Structure

Always generated regardless of useHeadless:

packages/{app_name}_ui_kit/
├── lib/src/{atomicType}/{component_name}/
│   ├── {component_name}.dart              # Barrel file
│   ├── {prefix}_{component_name}.dart     # Styled widget
│   ├── data/
│   │   ├── data.dart                      # Barrel file
│   │   ├── {component_name}_size_data.dart
│   │   ├── {component_name}_style_data.dart
│   │   └── {component_name}_variant_data.dart
│   └── enums/
│       ├── enums.dart                     # Barrel file
│       ├── {prefix}_{component_name}_variant.dart  (if hasVariants)
│       ├── {prefix}_{component_name}_size.dart     (if hasSizes)
│       └── {prefix}_{component_name}_type.dart     (if hasTypes)
└── test/src/{atomicType}/
    └── {component_name}_test.dart         # Widget test

apps/{app_name}_widgetbook/
└── lib/{atomicType}/
    └── {component_name}_showcase.dart     # Widgetbook showcase

When useHeadless: true, an additional file is generated:

packages/{app_name}_ui_kit/
└── lib/src/{atomicType}/{component_name}/
    └── headless_{component_name}.dart     # Headless base (behavior only, no styling)

The styled widget extends Headless{Component} instead of StatelessWidget/StatefulWidget directly, separating interaction logic from visual rendering.