Preview Single Directory Components in Drupal 11 Using the SDC Component Library Module

A pair of hands typing on a laptop
Stocksnap - Pixabay

Single Directory Components (SDCs) are a powerful new feature in Drupal 11, allowing developers to encapsulate templates, logic, and styles within one folder. In a detailed tutorial, Philip Norton from Hash Bang Code demonstrates how to preview these components directly within Drupal using the SDC Component Library module.

The guide walks through creating a simple “author” component that displays a name, bio, and avatar within a theme directory. By defining props and slots in a .component.yml file and adding a corresponding .story.twig file, developers can inject data and markup into their components for live previewing at the /components path. The module automatically scans active themes for story files and renders components in a visual interface once proper permissions are granted.

Norton also demonstrates adding multiple stories within the same file to test variations and highlights the module’s built-in accessibility scanner for quick a11y checks. Unlike Storybook, the SDC Component Library runs entirely within Drupal—no additional setup or external tooling required. The post concludes that this module provides a streamlined, Drupal-native workflow for developing and previewing components efficiently.

Disclosure: This content is produced with the assistance of AI.

Disclaimer: The opinions expressed in this story do not necessarily represent that of TheDropTimes. We regularly share third-party blog posts that feature Drupal in good faith. TDT recommends Reader's discretion while consuming such content, as the veracity/authenticity of the story depends on the blogger and their motives. 

Note: The vision of this web portal is to help promote news and stories around the Drupal community and promote and celebrate the people and organizations in the community. We strive to create and distribute our content based on these content policy. If you see any omission/variation on this please reach out to us at #thedroptimes channel on Drupal Slack and we will try to address the issue as best we can.

Related Organizations

Related People

Upcoming Events

Latest Opportunities