11.0.x

Override an Existing Single Directory Component

Last updated

Understanding Props and Slots in Drupal Single Directory Components

Last updated

Use Vite to Start a Decoupled React Application

Last updated

Anatomy of a Drupal Single Directory Component (SDC)

Last updated

A Drupal single directory component (SDC) is Drupal's way of packaging the markup, metadata, styles, and behavior for a UI element in one self-contained folder inside a theme or module. This structure helps front-end developers and site builders keep all related files together for easier theming and reuse. A Drupal single directory component directory must be located in a specific place and its files named with a particular convention so that the system can discover it and use its assets.

In this tutorial, we'll:

Add a Twig Template to Your Single Directory Component

Last updated

Add CSS and JavaScript to a Drupal SDC

Last updated

Use a Component in a Module via Render Arrays

Last updated

Use a Component in a Twig Template

Last updated

Add a Component YAML File for a Drupal SDC

Last updated

Create Your First Drupal Single Directory Component (SDC)

Last updated

In this tutorial, you’ll create and render a simple single directory component (SDC) in Drupal. You’ll set up the required files, call the component from a template, and confirm that Drupal renders it with its styles automatically attached.

By following along, you will:

  • Scaffold the files for a basic card component.
  • Reference the component in a node template.
  • See how Drupal renders the component’s HTML and CSS together.

When you’re done, you’ll have a complete working example of a Drupal single directory component.