Drupal Twig and SDC Tips for Building Flexible Component Libraries
summary
SDC lands in core (Drupal 10) and provides a component YAML schema, automatic library bundling and per-component attributes, but docs lag and namespaces are surprising: generated libraries use core/components.{theme}--{component}. Use slots for rendered content (render arrays, images) and props for typed data (enums, variants) to avoid validation errors, prefer the new include with with context=false so components stay agnostic, and wrap components with simple Drupal presenter templates or use UI Patterns to map field data into the SDC contract.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 2:10What components promised
- 6:47SDC in Drupal core
- 8:31Key confusion points
- 11:20Props vs slots explained
- 17:24Generated component libraries
- 18:26Handling attributes in components
- 21:57Best practices for SDC
- 28:15Migrating Layout Builder
- 32:57Documentation challenges
- 39:43Attributes deep dive
- 40:45Q&A
related talks
56mComponent-Driven Design Using Single Directory Components (SDC)
25mFrom Design Systems to Component Libraries
50mComponent Based Theming in the Real World
51mYour Component Library is Not a Design System
47mEnvisioning a Design System Maintained by the Drupal Community
10mCrafting Accessible Components for Component Libraries
21mShared Components Beyond the Design System
42mComponents everywhere! - Bridging the gap between backend and frontend