components

NOTE: If you’ve never used the Components module, we recommend you first look at Drupal core's Single Directory Components (SDC).

The Components module makes it easier for a theme to organize its components. It allows themes (and modules) to register Twig namespaces and provides some additional Twig functions and filters for use in Drupal templates.

What are Twig namespaces?

Twig natively offers a feature called “template namespaces”. Drupal core registers many Twig namespaces so that you can reference the Twig templates from specific modules or themes. For example, you may have seen this:

{% extends "@classy/block/block--system-menu-block.html.twig" %}

The text, @classy, indicates the Twig namespace we wish to use when getting the twig template.

Why use a custom Twig namespace?

Modern front-end development techniques means a website needs a component library where each component is concerned about a specific design element.

But Drupal core does not yet provide a component library for its design. Instead, Drupal core registers a Twig namespace for every module and theme in your installation (@bartik, @system, etc.) And all of those Twig templates are designed for specific Drupal theme hooks and data (nodes, comments, views, etc.) and must be placed in a /templates directory inside a module or theme.

Ideally, we would put our component library's Twig templates in a separate directory from the Drupal-style Twig templates. But Drupal core makes it very difficult to use Twig templates not placed in a /templates directory.

The Components module allows you to specify a different directory for you component library's Twig files and allows you to register a unique Twig namespace for those files.

Here's how you would register a @fusion Twig namespace where those files are stored in your theme's components/fusion folder:

components:
  namespaces:
    fusion:
      - components/fusion

More information

For more information about how to use this module, read the Components documentation.