---
title: "Single Directory Components"
date: "2026-02-04T17:09:33+00:00"
summary:
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/single-directory-components"
id: "0650f51f-151c-48dc-aba0-b73505a40565"
---

Single Directory Components (SDC) is a core Drupal feature that groups all files for a UI component, such as Twig templates, CSS, and JavaScript, into a single directory. This approach simplifies component management and improves mobility across different projects.

Using SDC
---------

To use SDCs in Site Studio, embed them in the Twig template of a custom component. Fields from your custom component that you want to use in your SDC can be passed to an SDC prop. Developers must ensure that the field types match the data types that users input. For additional information about custom components, visit [Custom components](/drupal-starter-kits/add-ons/site-studio/custom-components "Custom components") and [Create a custom component](/drupal-starter-kits/add-ons/site-studio/create-custom-component "Create a custom component").

### Embedding an SDC

The following example shows how to embed an SDC into the Twig template of a custom component. In this example, `text` is the SDC prop and `field.input` is the custom component form field that passes data.

    {% embed 'example_custom_component:test_sdc' with {
        text: field.input
    } %}
    {% endembed %}

### Mapping a dropzone

If a custom component includes a dropzone, you can map and render the dropzone with an SDC slot. Use the following method to map a dropzone:

    {% embed 'example_custom_component:test_sdc' with {
        text: field.input
    } %}
        {% block slot_example %}
          {{ dropzones['dropzone_c6d16282_1402_41cc_bcfd_c8204b3aae0b'] }}
        {% endblock %}
    {% endembed %}

When you use SDCs in this method, the SDC code does not require changes. This enables you to use SDCs from other contributed modules. You can create and share components across different projects and use them in Site Studio.