Setting Up Storybook in Drupal 10 with Single Directory Components

Staff Reporter

Source: Storybook in Drupal: Setup, Components, and SDC by Ala Batayneh (31 Aug 2025), Vardot

Ala Batayneh provides a detailed walkthrough for integrating Storybook into Drupal 10+ themes using the Single Directory Component (SDC) standard. Storybook offers an isolated environment to build, preview, and document UI components, making it easier for teams to collaborate and maintain design consistency. The tutorial covers module installation, Drupal environment configuration, and the use of tools like vite-plugin-twig-drupal and twig-drupal-filters to render Twig components in Storybook.

The guide explains how to structure components with YAML metadata, Twig templates, CSS/SCSS, and stories for multiple states. It also shows how to integrate components back into Drupal themes with proper namespaces and libraries. Developers gain workflow improvements such as accessibility testing, mock data generation, and auto-generated documentation. The article concludes with Varbase’s production-ready Storybook integration, which provides a reusable, WCAG-compliant design system. A valuable resource for Drupal themers adopting modern, component-driven development.

Reference: Storybook in Drupal: Setup, Components, and SDC by Ala Batayneh, Vardot (31 August 2025)

Storybook

Drupal 10

SDC

Vardot

Varbase

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.