Drupal SDC Single Directory Components vs Storybook: a component building showdown

Every modern website worth its salt runs on frontend components. Components are the essential building blocks that make a website consistent, performant, and scalable. For the longest time Storybook has been our champion for building and displaying components but there's a new contender when it comes to this for Drupal websites and software - Drupal SDC or Drupal single directory components.

Disclaimer: this is a comparison and showdown between the toolkits with which to build and display components. Storybook can indeed still be used to display Drupal SDC components but so too can other more lightweight Drupal modules.

Ladies and gentleman, the moment has arrived that we've all been waiting for. The main event of the evening! So let's get this party started! 6 rounds of boxing in the heavyweight division. On the line: legacy, pride, and the entire future of components in Drupal! This contest is sanctioned by the developers at Pivale. The three judges scoring will be Pri Scarabelli, Darren Fisher, and Daniel Johnson and in charge of the action at the bell your referee - the veteran, Barry Fisher.

Introducing first, and fighting out of the blue corner please welcome the challenger, the new kid on the block, the rising star - Drupal 'Single Directory Components' SDC. And across the ring, fighting out of the red corner the reigning, defending, undisputed champion of the Drupal components world - please welcome Chromatic's 'Component Library King' Storybook.

For the thousands in attendance and the millions watching around the world. The fighters are ready. The crowd is ready.

Let's get ready to RUMBLE!!!

The bell rings and the fighters come out swinging. Right from the start, Storybook shows us why it’s been the reigning champ for so long. Its workflow is powerful, flexible, and familiar to frontend developers across the globe. You define variations of your components through structured YAML files and javascript / react stories, giving you a reliable way to showcase every state of a button, a card, or a complex widget. Once you’ve invested in the setup, you’ve got a polished arena for your components to dance under the bright lights.

But here comes Drupal SDC, the hungry newcomer, and it’s already slipping Storybook’s jab. With SDC, you don’t have to wrestle with multiple YAML variations spread across your project. Instead, by utilising the contributed Drupal module SDC - Component library you can instead write *.story.twig files, placing the preview definition right next to your component with no context switching and no hunting around. Want to show your component in different wrappers, or drop it into a specific page-like scenario? Easy. Just write it in Twig, the same language you’re already using to build your site.

That native integration is a big deal. With Storybook, if you want to tweak the layout of your previews, you often find yourself tinkering with Storybook’s own React-based plumbing which can feel like stepping into another weight class. With SDC, you stay in Drupal’s corner, fighting on familiar ground, and that makes your workflow leaner, faster, and more intuitive.

The judges tally up the first round. It’s close! Storybook’s experience and ecosystem show through, but Drupal SDC lands the cleaner shots where it counts: simplicity, flexibility, and staying native.

Scorecard: Storybook 9 | Drupal SDC 10

The fighters come out for round two and immediately meet in the centre of the ring. This one is all about how the audience sees the action - the preview interfaces.

Storybook wastes no time showing off. Its polished UI is like the Madison Square Garden of component previews. Developers and designers can browse through stories, switch states with a click, and see components in glorious isolation. Add-ons like controls, accessibility checks, and responsive views make it feel like you’re ringside with the best seat in the house. It’s a professional setup that has been refined over years of use in thousands of projects.

But Drupal SDC isn’t backing down. With the SDC Component Library module, components get their own showcase right inside Drupal. You’ve got a clean interface to browse, test, and review components in context. For Drupal teams, this has the huge advantage of living where the project already lives. No jumping between tools, no extra systems to maintain - just a native Drupal experience with previews that get the job done every bit as well as Storybook.

The crowd roars as both fighters trade blows. Storybook lands a smooth right hook with its battle-tested interface and wide ecosystem of preview features. Drupal SDC fires back with a crisp left, countering that you don’t need to leave Drupal at all to preview components in a way that feels natural and straightforward.

At the bell, the judges don’t hesitate. This round is too close to call. Both fighters put on a clinic.

Scorecard: Storybook 10 | Drupal SDC 10

The bell clangs and round three is underway. This round is all about speed, stamina, and efficiency because no matter how flashy a fighter looks in training, it’s how they perform under pressure that counts.

Storybook comes out swinging with its polished workflows and add-ons, but there’s weight behind those gloves. Each component often pulls in its own set of JavaScript libraries and build pipeline baggage. That means even a simple button or card can be carrying more than its fair share - extra bundles, redundant scripts, and a reliance on a heavy toolchain.

Drupal SDC, on the other hand, looks light on its feet. It’s fighting with Twig at its core, rendering everything server-side. No React in site! That means the browser only gets what it truly needs, and nothing more. JavaScript? Only loaded when required. Assets? Scoped and loaded only for the components in play. It’s a leaner, tighter strategy and it shows in faster page loads, smoother mobile experiences, and resilience on slower networks.

The crowd can see the difference: Storybook is strong, but a little heavy-legged. Drupal SDC dances circles around it, landing sharp, efficient jabs with each server-rendered component. By the time the bell rings, there’s no question who’s edged this round.

Scorecard: Storybook 9 | Drupal SDC 10

The fighters touch gloves and round four begins. This one is all about the training camps - the build setups and workflows that get each fighter into shape before they even step into the ring.

Storybook, the seasoned champ, rolls in with a whole entourage: Babel, Webpack, Vite, and a stack of node modules taller than the referee. It’s an impressive setup for sure, with preprocessors, SCSS pipelines, JavaScript transpilers - the works. But let’s be honest: all that gear weighs heavy. Every build and deployment takes longer, every dependency is another cutman to keep track of, and the risk of breakage creeps in with every package update. Storybook is powerful, but it’s also a fighter that needs a small army just to keep the gloves laced.

Now Drupal SDC? It’s stripped down, lean, and ready to go. No bloated build pipeline here. Just raw, modern CSS and JavaScript, straight out of the box. Today’s native CSS features such as custom properties, grid, flexbox, container queries, etc. have grown into championship-level tools, making preprocessors like SCSS feel more like training wheels than a competitive edge. And the best part? Without a node ecosystem hanging around its neck, deployments are cleaner, faster, and less error-prone.

The crowd gasps as SDC lands a devastating uppercut. Storybook stumbles, weighed down by its toolchain, while Drupal SDC bounces back to its corner barely breaking a sweat. The ref gives a standing eight count. This round is a clear knockdown.

Scorecard: Storybook 8 | Drupal SDC 10

The bell sounds, and Drupal SDC wastes no time. It comes out swinging, relentless, pressing Storybook back against the ropes.

Running Storybook as a separate system has always been a double-edged sword. Sure, it’s polished, but with that shine comes overhead: a standalone app to patch, a web of node dependencies to monitor, and a constant stream of updates to chase. Every new package version is another opening for bugs or vulnerabilities. It’s like carrying a glass jaw into the ring - one clean hit and you could be on the canvas.

Drupal SDC, meanwhile, fights with ruthless efficiency. By being part of Drupal core, it eliminates an entire class of risks and maintenance headaches. There’s no second system to babysit, no node ecosystem to wrangle, and no forgotten Storybook instance quietly gathering dust and vulnerabilities on a staging server. Maintenance is lighter, security is tighter, and deployments stay lean.

The challenger sees the champ falter and lands a crushing left hook. Storybook staggers, struggling to keep its guard up under the barrage. The referee steps in, starting another standing eight count. The crowd is on its feet! Drupal SDC has scored another knockdown!

But Storybook isn’t finished. It shakes its head, regroups, and beats the count. The champ still has fight left for the final round.

Scorecard: Storybook 8 | Drupal SDC 10

The final round begins, and both fighters know what’s on the line. Storybook, bruised and battered, digs deep for a rally. This round is all about reach beyond the ropes - how far these component systems can travel outside their home arenas.

Storybook comes out strong. It knows it needs a knockout to win this fight. It’s always been marketed as the framework-agnostic champion - React today, Vue tomorrow, Twig if you want to, even Angular if that’s your style. In theory, one Storybook can be shared between different platforms. A design system written in Twig could serve both a Drupal site and a WordPress site, provided both teams are working with similar templating conventions. That kind of flexibility is no small thing, and it’s why Storybook has long been seen as the Drupal standard.

Drupal SDC fires back, but here’s the truth: its power is rooted firmly in Drupal itself. Single directory components can absolutely be shared between different Drupal websites, which makes them fantastic for multisite setups or distributed Drupal projects. But beyond Drupal? That’s where the reach ends. The crowd knows it, the judges know it. This is a limitation of being purpose-built for the Drupal ring.

But there's a twist in this evening's proceedings. Storybook’s promise of universal share-ability isn’t always as smooth as it looks on the poster. To really share components across completely different systems, everything has to align - same framework, same templating approach, same build pipeline. Without that, the dream of "write once, run anywhere" often turns into a messy clinch.

The bell rings and the round ends with Storybook finally taking one back on the scorecards. It reminded everyone why it’s been the reigning champ for so many years. But our ringside judges have picked their corner. The scorecards are making their way to the master of ceremonies.

Scorecard: Storybook 10 | Drupal SDC 9

Ladies and gentlemen. After 6 rounds of championship boxing we go to the judges score cards. All three judges score the fight 59 to 54 in favour of your winner by unanimous decision. AND THE NEW unified heavyweight champion of the component world - Drupal 'Single Directory Components' SDC!!!

Well that was a spectacular, close fight. Storybook remains a valuable tool, especially for cross-platform design systems or when you want a standalone component library but when it comes to Drupal websites, single directory components deliver knockout performance. They are simpler to build, faster to load, easier to maintain, and perfectly in tune with Drupal’s theming system. Of course the crowd in attendance and the audience at home may have seen the fight differently.

Whilst our judges at ringside appreciate that Storybook is still a valid way to display Drupal SDC components, the fact remains that Storybook is a non Drupal native system heavily tangled in the node ecosystem that requires constant maintenance and upgrades. Since moving to a purely native workflow of building components in Drupal and displaying components in Drupal our ringside judges have enjoyed the simplified workflows, reduced javascript bloat, and overheads of maintaining a separate component library system!

Here our ringside judges have made their decision! We have a new champion for building Drupal components. Long may Drupal SDC reign!

If you’d like to explore more about Drupal SDC single directory components, modern CSS practices, or see how Storybook integrates with Drupal, here are some resources worth exploring:

• Using Drupal SDC documentation – the official Drupal documentation for SDC.
• MDN CSS documentation – a comprehensive reference for modern CSS features.
• Storybook Drupal module – a contributed module that integrates Storybook into Drupal projects.
• Drupal SDC component library module - a contributed module that provides a native component library interface for Drupal SDCs.