Drupal Core Single Directory Components Introduce Component Variants

Drupal Core Single Directory Components Introduce Component Variants

Drupal core’s Single Directory Components (SDC) now supports first-class component variants through a new root-level declaration, closing a major contributed-project blocker and laying groundwork for the upcoming 11.2.0 release. Merged on June 24, 2025, the update introduces a non-breaking API change that lets component authors define named variants with titles and descriptions, and lets render arrays specify the desired variant via a `#variant` key.

Component variants have long been a staple of UI frameworks, including Bootstrap cards offering vertical and horizontal layouts, and Material Design buttons providing text, outlined, raised, and unelevated styles, yet SDC previously required workaround patterns. Defining a `variant` prop as a simple string enum obscured documentation metadata, using verbose `anyOf` schemas became cumbersome, and inconsistent prop names made it impossible for external modules to detect variant support reliably.

The new solution mirrors SDC’s existing `slots` property. Component YAML declarations can now include a `variants` section alongside `props` and `slots`, for example:

```yaml
name: Card
variants:
 primary:
   title: Primary
   description: Standard card style
 inverted:
   title: Inverted
   description: Light-on-dark style
props: {}
slots: {}
```

When rendering a component, authors specify:

```php
[
 '#type' => 'component',
 '#component' => 'card',
 '#variant' => 'primary',
 '#props' => [],
]
```

This approach keeps the API backward-compatible while providing clear, structured metadata for each variant.

With the variants feature in place, contributed projects can be ported to Drupal 11 without resorting to custom hacks. The SDC FAQ documentation will be updated to reflect these changes, and future SDC enhancements, such as template-path declarations and schema references, stand ready for implementation.

For full details, see the issue page on Drupal.org: https://www.drupal.org/project/drupal/issues/3390712

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.

Upcoming Events

Latest Opportunities