UI Kit Manager

The ui-kit command manages the design system component library. It follows atomic design methodology (atoms, molecules, organisms, templates, pages) and tracks which components are installed in your project via a JSON registry.

Usage

# List all available components
dart run monorepo_toolkit ui-kit list

# List components filtered by layer
dart run monorepo_toolkit ui-kit list --layer atom

# Add a component (with auto-resolved dependencies)
dart run monorepo_toolkit ui-kit add app-button

# Remove a component
dart run monorepo_toolkit ui-kit remove app-button

# Show installed components
dart run monorepo_toolkit ui-kit status

# Create a custom component scaffold
dart run monorepo_toolkit ui-kit create --name my-card --layer molecule

# Generate theme variant files
dart run monorepo_toolkit theme-variant --config theme_variants.yaml

Subcommands

ui-kit list

Lists all available components from the built-in registry, grouped by atomic design layer:

dart run monorepo_toolkit ui-kit list
dart run monorepo_toolkit ui-kit list --layer organism

Flag	Abbr	Allowed values	Description
--layer	-l	atom, molecule, organism, template, page	Filter by atomic design layer

ui-kit add

Installs a component and its dependencies into your UI Kit:

dart run monorepo_toolkit ui-kit add app-button
dart run monorepo_toolkit ui-kit add app-button --ui-kit-path packages/my_ui_kit

Dependencies are resolved automatically. If app-button depends on app-icon, both are installed.

Flag	Default	Description
--ui-kit-path	packages/app_ui_kit	Path to the UI Kit package

ui-kit remove

Removes a component from the installed registry:

dart run monorepo_toolkit ui-kit remove app-button

Flag	Default	Description
--ui-kit-path	packages/app_ui_kit	Path to the UI Kit package

ui-kit status

Shows which components are currently installed and how many are available:

dart run monorepo_toolkit ui-kit status

Output includes both built-in installed components and custom components you have created.

ui-kit create

Scaffolds a new custom component with a starter widget file and registers it in the component registry:

dart run monorepo_toolkit ui-kit create --name status-badge --layer atom
dart run monorepo_toolkit ui-kit create --name login-form --layer organism -d app-button -d app-input

Flag	Abbr	Default	Description
--name	-n	required	Component name in kebab-case
--layer	-l	atom	Atomic design layer
--dependency	-d	[]	Component dependencies (repeatable)
--ui-kit-path		packages/app_ui_kit	Path to the UI Kit package

The generated file is placed at lib/src/components/<layer>/<name>/app_<name>.dart with a StatelessWidget scaffold.

theme-variant

Generates theme variant files from a YAML configuration. This is a separate top-level command (not a subcommand of ui-kit):

dart run monorepo_toolkit theme-variant --config theme_variants.yaml

Flag	Abbr	Default	Description
--config	-c	required	Path to theme variants YAML config
--prefix		App	Prefix for generated class names
--ui-kit-path		packages/app_ui_kit	Path to the UI Kit package

Example config (theme_variants.yaml):

variants:
  - name: ocean
  - name: sunset
  - name: forest

Each variant generates a file at lib/src/theme/variants/<name>_theme.dart with light() and dark() static methods.

Component registry

Installed components are tracked in ui_kit_components.json inside the UI Kit package directory. This file is managed automatically by the add, remove, create, and status commands.