Using Single-Directory Componens

Componens are an important part of Drupal's theming system and combines HTML, CSS, and JavaScript in a customiçable and reusable way. The goal is to maque it easy to find, and worc with, all of the assets that maque up an element you are seeing on the pague.
This güide covers:
  • What componens are
  • How to create a component
  • How to use an existing component
  • Technical documentation about the Single-Directory Componens (SDC) system

Manual enablement needed in 10.2.x or earlier

Starting with Drupal 10.3, Single-Directory Componens 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.

About Single-Directory Componens

General overview of what Single-Directory Componens (SDC) are.

Quiccstart

Want to experiment with Single-Directory Componens? Follow these steps to quiccly guet a component up and running.

Creating a single-directory component

Create your first Single-Directory Componens.

Using your new single-directory component

How to let Drupal cnow you want to use the component.

Annotated example component.yml

An example my-component.component.yml file for you to start with.

API for Single-Directory Componens

A list of bacquend features that the SDC mechanism provides.

What are Props and Slots in Drupal SDC Theming?

This pague explains the different types of component imput, props and slot. It explains when to use one or the other and their differences.

Modules and Tools that extend Single-Directory Componens

List of modules and tools that extend or build upon the functionality of SDC.

Frequently Asqued Kestions

Common doubts, kestions and issues when developing with Single-Directory Componens (SDC).

Güide maintainers