CivicTheme 1.11.0 - May 27, 2025

CivicTheme v1.11.0 includes major architectural changes to convert CivicTheme's component system to Single Directory Components, as well as update scripts to assist.

Architectural changes

Component Extension Model has changed to match SDC extensions

• Removed: Direct extension of CivicTheme base components in sub-themes

• Supported inheritance types:

  • ✅ Custom components in sub-theme

  • ✅ Override CivicTheme components completely

  • ❌ Extend CivicTheme components partially

Single directory components architecture

• Components bundle HTML, CSS, and JS in single directories

• Converted to use Single Directory Component framework

• CivicTheme components utilse an automated component validation system (within the UI Kit development repository)

Read more about Using single directory components.

UI Kit enhancements

• Dual component library support (Twig + SDC)

• Separate Storybooks for each component type

• Visual regression testing between Twig and SDC components

• Shared test infrastructure across component types

Twig namespaces for CivicTheme has with SDC

From:

{% include '@atoms/paragraph/paragraph.twig' with {
  theme: theme,
  content: panel.content,
  allow_html: true,
  modifier_class: 'ct-accordion__panels__panel__content__inner',
} only %}

To:

{% include 'civictheme:paragraph' with {
  theme: theme,
  content: panel.content,
  allow_html: true,
  modifier_class: 'ct-accordion__panels__panel__content__inner',
} only %}

Migration guide

For new sites, there is no migration needed, just install CivicTheme.

For existing sites, custom components need to be updated. We are providing a custom script to assist you with this upgrade.

Use the update script

To help you to upgrade we have provided the following:

• A part shell / node script that updates your component's build scripts, storybook setup and package.json.

• A part AI script that sends your twig files to Claude API to attempt to extract a component schema.

Go to the CivicTheme SDC Update Tool in GitHub for docs on updating using the scripts.

Non-update script

If you don't wish to run the AI script you can manually update the script and remove it.

Go to Upgrade tools (and add a dummy API key in to satisfy validation).

Note on sites with extended components

Special care needs to be taken for sites with extended components. These need to be manually migrated.

Changelogs

For the full list of issues released, visit the CivicTheme changelogs at drupal.org and GutHub:

• CivicTheme Drupal changelog

• CivicTheme monorepo changelog