components.md

Components

Component commands use the system and variant recorded in project.emulsify.json. Run them from the project root or any child directory inside an initialized Emulsify project.

List Available Components

emulsify component list
emulsify component ls

The command loads the configured system, finds the selected variant, and prints each component as:

<structure> -> <component-name>

Example:

base -> 01-colors
atoms -> buttons
molecules -> card

Install One Component

emulsify component install card
emulsify component i card

The command installs the named component from the cached system into the project-relative directory defined by the selected variant structure.

If the component declares dependencies, those dependencies are installed too.

{
  "name": "card",
  "structure": "molecules",
  "dependency": ["images", "text", "links", "buttons"]
}

Installing card also installs its dependencies.

Overwrite Behavior

If the destination exists, component install prompts before replacing it.

emulsify component install card

Use --force to replace without prompting:

emulsify component install card --force

Use --all to install every component from the selected variant. This mode force-installs all component destinations.

emulsify component install --all

Dry Runs

Use --dry-run to preview component installation without copying, removing, or overwriting files.

emulsify component install card --dry-run
emulsify component install --all --dry-run

Dry-run output includes:

Output	Meaning
Dependencies	Components that will be installed because the target component depends on them.
Destination	Project path where each component would be copied.
Destination exists	Whether the destination currently exists.
Real run would	Whether the real command would copy, replace, or prompt.

Create A Local Component

component create generates a new component from built-in templates or project-level template overrides.

emulsify component create promo-card --directory molecules --format default
emulsify component c teaser --directory molecules --format sdc

Component names may include letters, numbers, and single hyphens between words. The CLI derives reusable name forms from the input.

Input	Folder/File Prefix	CSS Class	JavaScript Name	YAML Prefix	Display Name
featured-item	featured-item	featured-item	featuredItem	featured_item	Featured Item
featuredItem	featured-item	featured-item	featuredItem	featured_item	Featured Item

The destination is:

<project-root>/<structure.directory>/<component-filename>

For a Drupal variant structure named base with directory components/00-base, this command:

emulsify component create featured-item --directory base --format default

Creates:

components/00-base/featured-item

Generated Formats

Default components generate:

<filename>.twig
<filename>.scss
<filename>.yml
<filename>.stories.js

SDC components generate:

<filename>.twig
<filename>.scss
<filename>.component.yml
<filename>.js
<filename>.stories.js

Create Dry Runs

Use --dry-run to preview component creation without writing files.

emulsify component create featured-item --directory base --format default --dry-run
emulsify component create featured-item --directory base --format sdc --dry-run

Dry-run output includes the selected format, structure path, parent directory, final destination, whether the destination exists, and generated file paths.

Non-Interactive Creation

In interactive terminals, missing --format or --directory values are prompted. In non-interactive environments, pass both flags:

emulsify component create featured-item --directory base --format default

Use --yes when the command should replace an existing generated component without asking:

emulsify component create featured-item --directory base --format default --yes

Template Overrides

Projects can override the generated files with .cli/templates/<format>/... files. See Component Template Overrides.