Previewing Drupal 11 Single Directory Components: Storybook vs. the SDC Component Library
Two ways to preview a Single Directory Component in isolation — the Drupal Storybook module (external tooling) and the SDC Component Library module (zero dependencies, runs inside Drupal). Here's how they differ and when to reach for each.
Why Preview Components in Isolation
Single Directory Components (SDC) keep a component's Twig template, CSS, JavaScript, and YAML definition in one folder — a stable, cornerstone feature of Drupal 11's theming layer. The natural next step once you have a component is previewing it without spinning up a full page render, which is where two different tools come in.
Option 1: The Storybook Module
The Drupal Storybook module provides Drush commands that generate the files Storybook needs, plus endpoints that let Storybook render the actual Drupal component rather than a reimplementation of it. You write a *.stories.twig file alongside your component:
{% stories %}
{% story 'Default' %}
{% include 'my_theme:card' with { title: 'Example card', body: 'Some text' } %}
{% endstory %}
{% endstories %}Multiple {% story %} blocks inside the same file let you demonstrate variations of the same component side by side. The trade-off is tooling overhead — Node, Storybook itself, and a build step that has to stay in sync with your Drupal theme.
Option 2: SDC Component Library (No External Tooling)
The SDC Component Library module takes a Drupal-native approach. You define props and slots in the component's .component.yml file, add a .story.twig file next to it, and the module scans active themes automatically and serves live previews at /components — inside your running Drupal site, with no Node toolchain at all.
Which One to Use
- Pick Storybook if your team already has a frontend workflow built around it, or you need Storybook's wider ecosystem (visual regression testing, design system documentation, addons).
- Pick the SDC Component Library if you want zero additional dependencies and your reviewers are mostly working inside Drupal already — site builders and content strategists included, since there's nothing extra to install.
Both require at least Drupal 10.1, though SDC's capabilities continue to expand specifically in Drupal 11.