Understanding SDC in Drupal

Frontend development in Drupal has evolved significantly. With Drupal 10, theming is no longer just about Twig templates scattered across folders. Drupal now supports a component-based architecture through SDC – Single Directory Components.

What Is SDC (Single Directory Components)?

SDC means:

A self-contained UI component, where all related files live inside one directory.

Each component typically contains:

• Twig template

• YAML metadata

• CSS

• JavaScript (optional)

Everything related to a component lives together.

Real-Life Analogy: SDC Explained Simply

Without SDC

Imagine your TV remote:

• Buttons in one room

• Battery in another

• Circuit board somewhere else

Hard to manage, right?

With SDC 

Now imagine:

• Remote body

• Buttons

• Battery

• Circuit board

All packed neatly in one box.

That’s exactly what Single Directory Components do for Drupal UI.

Why Was SDC Introduced in Drupal?

Traditional Drupal theming had problems:

• Twig in /templates

• CSS in /css

• JS in /js

• Hard to reuse components

• Difficult collaboration with designers

SDC solves this by:

• Encouraging component reusability

• Enforcing clean structure

• Aligning Drupal with design systems

SDC Folder Structure

A basic SDC component looks like this:

components/
 └── card/
     ├── card.twig
     ├── card.component.yml
     ├── card.css
     └── card.js

One folder = one component

Step 1: Enable SDC Support

It does NOT mean:

• Installing a module

• Enabling something from Extend

• Turning on a setting in UI

SDC (Single Directory Components) is already part of Drupal core (Drupal 10.1+).

So “Enable SDC support” really means:

Configure your theme so Drupal knows you are using components.

In Simple Words

Drupal does not automatically scan a components/ folder.

You must tell Drupal:

“Hey Drupal, my theme uses Single Directory Components, and this is where they live.”

That instruction is what people loosely call “enabling SDC support.”

Ensure your theme uses:

core_version_requirement: ^10

name: My Theme
type: theme
base theme: classy

components:
  namespaces:
    components: components

This tells Drupal:

“My components live inside the /components directory.”

Step 3: Create a Component

Example: Card Component

Folder

components/card/

card.component.yml

name: Card
description: A reusable card component
props:
  title:
    type: string
    required: true
  description:
    type: string
  image:
    type: string

 Defines:

• Component name

• Props (inputs)

• Validation

card.twig

<div class="card">
  {% if image %}
    <img src="{{ image }}" alt="{{ title }}">
  {% endif %}
  <h3>{{ title }}</h3>
  <p>{{ description }}</p>
</div>

card.css

.card {
  border: 1px solid #ddd;
  padding: 16px;
  border-radius: 6px;
}

Step 4: Use the Component

In Twig Template

{% include '@components/card/card.twig' with {
  title: 'Drupal SDC',
  description: 'Reusable UI made simple',
  image: '/themes/mytheme/images/card.png'
} %}

Disadvantages of SDC in Drupal

1. Learning Curve

Developers used to classic theming may struggle initially.

2. Overhead for Small Sites

For simple themes, SDC may feel heavy.

3. Still Evolving

SDC is relatively new:

• Patterns still emerging

• Community examples growing

4. Discipline Required

Without standards, teams may misuse components.

SDC vs Traditional Drupal Theming