Single Directory Components (SDC) consist of a directory of files that go together to create a small component on a Drupal website. SDC can be nested together, which means that a consistent set of elements can be created and plugged together on a site.

The power of SDC comes from their ability to be self contained. If you have the need to build a complex component that displays data in a widget then building it as a SDC means that you can ensure that every time you include it, the same widget will be shown.

It is possible to add an SDC to your Drupal site without adding them into tempaltes first. You can use the SDC Component Library module to preview them whilst you are building them, and then integrate them into your site once they are ready.

This article is more or less a recreation of the article Using Storybook To Preview Single Directory Components, but centered around the SDC Component Library module instead. As such, there will be a little bit of duplicaton, but each article is self contained so you don't need to jump back and forward between the pages.

In this article we will look at setting up a theme with an SDC, and then using the SDC Component Library module preview that component.

To preview an SDC in SDC Component Library we first need to create one, this will be used as an example thoughout the rest of the article. It is assumed that you have a custom theme that you can build an SDC in.

Read more