Drupal 11's Site Templates Revolution with SDC and Recipes

If your world revolves around Component-Driven Development (CDD), decoupled architecture, and the eternal struggle to keep your front-end code clean, Drupal 11 is bringing the architectural changes you've been waiting for.

Forget the general concept of "themes" for a moment. Drupal 11 introduces a powerful two-pronged approach to structured site building and templating: Site Templates (the high-level outcome) powered by Recipes (the configuration layer) and, most critically for us developers, the stability of Single Directory Components (SDC) (the fundamental UI building block).

For developers seeking modularity, product owners demanding speed-to-market, and designers enforcing design system consistency, these concepts are the next step in mastering the Drupal ecosystem.

1. The Core Innovation: Single Directory Components (SDC)

While introduced in an experimental state in Drupal 10.1, Single Directory Components (SDC) is stabilized and fully integrated into the Drupal 11 core. SDC is the game-changer for templating, promoting the principle of encapsulation right in the theme layer.

Why SDC is Crucial for Modern Development Teams

The SDC Anatomy (The Code Contract)

An SDC is defined by its directory structure and the required *.component.yml metadata file. This file acts as the explicit API for the component, preventing unexpected behaviors by bypassing Drupal's traditional preprocess/hook system.

Example: A Simple 'Alert' Component

1. Directory Structure:

MYTHEME/
└── components/
   └── alert/
       ├── alert.component.yml  <-- The API/Contract
       ├── alert.html.twig      <-- The Markup
       ├── alert.css            <-- The Styles
       └── alert.js             <-- The Interactivity

2. The Contract (alert.component.yml):

This is where we define what data the component needs. We use JSON Schema syntax for validation and clarity.

name: Alert Message
description: A dismissable message box for warnings or info.
props:
 type: object
 required:
   - message
   - type
 properties:
   message:
     type: string
     title: Alert Content
   type:
     type: string
     title: Color Scheme
     enum: ['info', 'warning', 'error', 'success'] # Restricted set of values
slots:
 extra_content:
   title: Additional Markup
   description: Optional block content or complex links.

3. The Twig (alert.html.twig):

This template strictly uses the defined props and slots.

<!-- The 'type' variable comes from props and is used for CSS class generation -->
<div class="alert alert--{{ type }}" role="alert">
 <div class="alert__message">
   <!-- The 'message' variable comes from props -->
   {{ message }}
 </div>

 {% if extra_content %}
   <div class="alert__details">
     <!-- The 'extra_content' slot is rendered here -->
     {{ extra_content }}
   </div>
 {% endif %}
</div>

4. Using the Component (The Developer Hack):

You call the component directly in any other Twig file using the component ID (namespace:component-name), passing data into the props and slots.

<!-- Call the SDC directly, adhering to its contract -->
{% include 'my_theme:alert' with {
 message: 'Your form submission was successful.',
 type: 'success'
} %}

<!-- Use the 'embed' tag to pass complex HTML into a slot -->
{% embed 'my_theme:alert' with {
 type: 'warning',
 message: 'Review the following errors.'
} %}
 {% block extra_content %}
   <a href="/help-desk">Contact Support</a>
 {% endblock %}
{% endembed %}

This is a massive step away from global templates, forcing a clean API between the back-end and front-end.

2. The High-Level Concept: Site Templates and Recipes

The new concept of Site Templates in Drupal 11 is the **product layer** that leverages these architectural improvements. A Site Template is a complete, ready-to-go Drupal experience, designed to reduce the time from idea to live site from days to minutes.

The Mechanism: Recipes

Site Templates are essentially a packaging of the **Recipes** initiative. A Recipe is a collection of:

1. Configuration: Content types, views, roles, settings.
2. Modules: Both core and contributed modules.
3. Content: Sample content (nodes, media).
4. A Theme: A pre-configured theme that heavily uses **SDCs**.

For a developer, a Recipe is a lightweight, declarative way to apply a functional structure. The goal is that installing a "Blog Site Template" or an "E-commerce Site Template" gives you the entire site structure and its corresponding theme instantly.

Technical Advantage for Product Teams:

• Consistency: Ensures every new site or sub-site starts with the same validated set of modules, configurations, and the same SDC-based theme.
• Upgrades: Because Recipes (and SDCs) enforce modularity, future upgrades and maintenance become more predictable and less error-prone—a huge reduction in **technical debt**.
• Low-Code/No-Code: The Site Template provides a visually complete, functional foundation that site builders (non-developers) can immediately start using with tools like Layout Builder.

3. The Future: Drupal Canvas and Visual Site Building

The Site Templates and SDC foundation paves the way for advanced visual tooling, particularly the **Drupal Canvas** initiative. This aims to provide a true, in-browser, component-level editing experience—similar to modern site builders but rooted in Drupal's robust content management system.

The key takeaway for you: SDC is the required underlying structure. Without the clean, predictable APIs of SDC, visual builders cannot reliably edit and manipulate components.

By adopting SDC now (available and stable since Drupal 10.3/11), you're not just cleaning up your theme; you're future-proofing your entire front-end architecture for the next decade of Drupal innovation.

You can learn more about the technical implementation of SDC in Drupal core by checking out this video: Single Directory Components in Drupal 11. This video provides context on SDC, which is the foundational concept enabling the new Site Templates architecture in Drupal 11.