Using Single-Directory Components

Components are an important part of Drupal's theming system and combine HTML, CSS, and JavaScript in a customizable and reusable way. The goal is to make it easy to find, and work with, all of the assets that make up an element you're seeing on the page.

This guide covers:

What components are
How to create a component
How to use an existing component
Technical documentation about the SDC system

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.

About Single-Directory Components

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

Quickstart

Want to experiment with Single-Directory Components? Follow these steps to quickly get a component up and running.

Creating a single-directory component

Create your first Single-Directory Components.

Using your new single-directory component

How to let Drupal know 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 Components

A list of backend features that the SDC mechanism provides.

What are Props and Slots in Drupal SDC Theming?

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

Modules and Tools that extend Single-Directory Components

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

Frequently Asked Questions

Common doubts, questions and issues when developing with Single-Directory Components (SDC).

Guide maintainers

mherchel's picture

pdureau's picture

jldust's picture

e0ipso's picture