API for Single-Directory Components

Last updated on
27 March 2025

The API of Single-Directory Components includes:

  1. The component plugin manager: the plugin.manager.sdc service is implemented in Drupal\Core\Theme\ComponentPluginManager by default. This service is needed by modules that need to find and instantiate components.
  2. Various component-related exceptions listed in core/lib/Drupal/Core/Render/Component/Exception. Code using Single-Directory Components can rely and extend these exceptions.
  3. The folder structure of a component and the naming conventions of the files in it.
  4. The structure of the component metadata (the my-component.component.yml). Note that the metadata of the component is described, and optionally validated, by the schema in metadata.schema.json (this file is for internal validation and not part of the API).
  5. The render element and its class \Drupal\Core\Render\Element\ComponentElement.
  6. The naming convention for the ID when using Twig's include and embed fucntions. This naming convention is [module-or-theme-machine-name]:[component-machine-name]. See the example below.
{{ include('sdc_examples:my-button', { text: 'Click Me', iconType: 'external' }, with_context = false) }}

This way of specifying the component for Twig's include and embed function ('my-theme:my-component' in the example) will not change, as it is considered an API.

Manual enablement needed in 10.2.x or earlier

Starting with Drupal 10.3, Single-Directory Components became part of Drupal Core's render system. If you're using Drupal 10.2 or earlier, you must enable the module in Core manually to use this feature.

Help improve this page

Page status: No known problems

You can: