Component-Driven Theming is a modern frontend architecture approach where UI is built using reusable, self-contained components instead of large monolithic templates. In Drupal 10 and 11, this approach aligns with Twig templating, libraries, render arrays, and design system practices. Instead of styling pages globally, developers build small components — such as cards, banners, buttons, or media blocks — each with its own template, styles, and scripts. This leads to scalable, maintainable, and performance-optimized frontend systems. In enterprise environments, component-driven theming enables consistency across large multisite platforms, improves collaboration with design teams, and supports design systems like USWDS.

1. What Is a Component?

A component is:

• A reusable UI block
• Self-contained
• Has its own Twig template
• Has its own CSS
• Optionally has its own JS
• Can be used in multiple places

Examples:

• Card
• Hero banner
• CTA block
• Testimonial
• Alert
• Media teaser

2. Why Component-Driven Theming Matters

Traditional theming approach:

• Large page templates
• Heavy global CSS
• Hard-to-maintain overrides

Component-driven approach:

• Modular architecture
• Scoped styling
• Predictable markup
• Easier testing
• Better performance

3. Recommended Theme Structure

weeklydrupal_theme/
  ├── components/
  │     ├── card/
  │     │     ├── card.html.twig
  │     │     ├── card.css
  │     │     └── card.js
  │     ├── banner/
  │     │     ├── banner.html.twig
  │     │     ├── banner.css
  │     │     └── banner.js
  ├── templates/
  ├── css/
  ├── js/
  └── weeklydrupal_theme.libraries.yml

Each component owns its styling and behavior.

4. Creating a Card Component

Step 1: Define Library

In weeklydrupal_theme.libraries.yml:

card:
  css:
    component:
      components/card/card.css: {}
  js:
    components/card/card.js: {}
  dependencies:
    - core/drupal
    - core/once

Step 2: Create Twig Template

components/card/card.html.twig

{{ attach_library('weeklydrupal_theme/card') }}

<div class="wd-card">
  {% if image %}
    <div class="wd-card__image">
      {{ image }}
    </div>
  {% endif %}

  <div class="wd-card__content">
    <h3 class="wd-card__title">{{ title }}</h3>

    {% if description %}
      <p class="wd-card__description">{{ description }}</p>
    {% endif %}

    {% if link %}
      <a href="{{ link.url }}" class="wd-card__link">
        {{ link.title }}
      </a>
    {% endif %}
  </div>
</div>

Step 3: Use Preprocess to Pass Variables

function weeklydrupal_theme_preprocess_node(&$variables) {
  if ($variables['node']->bundle() === 'article') {
    $variables['title'] = $variables['label'];
    $variables['description'] = $variables['content']['body'];
    $variables['image'] = $variables['content']['field_image'];
  }
}

5. Integrating with Paragraphs

In Drupal, Paragraphs often represent components.

Paragraph type: card

Override template:

paragraph--card.html.twig

Inside:

{% include '@weeklydrupal_theme/components/card/card.html.twig' with {
  title: content.field_title,
  description: content.field_description,
  image: content.field_image,
  link: content.field_link
} %}

This keeps component logic reusable.

6. Component Reusability Pattern

A good component should:

• Accept variables
• Not depend on page context
• Not hardcode content
• Be flexible

This allows reuse in:

• Nodes
• Views
• Blocks
• Layout Builder

7. Layout Builder + Components

With Layout Builder:

• Each block becomes a component
• Components can be rearranged
• Twig + libraries remain reusable

This aligns perfectly with component-driven architecture.

8. Design System Alignment

Component-driven theming supports:

• USWDS
• Atomic Design
• CUBE CSS
• Design Tokens

Instead of styling pages, style components.

9. Performance Benefits

Because each component:

• Loads only its own CSS/JS
• Avoids global heavy assets
• Reduces unused code

This improves Lighthouse performance scores.

10. Enterprise Pattern (Large Sites)

Common structure in enterprise:

• Component library documented in Storybook
• Drupal renders components via Twig
• Design tokens stored in CSS variables
• Shared pattern across multisites

This ensures long-term scalability.

Common Mistakes

• Large global CSS files
• No component isolation
• Hardcoding content in Twig
• Not using libraries per component
• Ignoring accessibility inside components

Interview Questions (Frontend Drupal)

1. What is component-driven theming?

Expected Answer:
An architectural approach where UI is built using reusable, self-contained components with their own templates, styles, and scripts.

2. Why is component-level library loading important?

Expected Answer:
It improves performance and ensures assets load only where needed.

3. How can Paragraphs support component-driven theming?

Expected Answer:
Each paragraph type can represent a reusable component with its own template and library.

4. How does Layout Builder align with component architecture?

Expected Answer:
Layout Builder allows components to be arranged dynamically while maintaining reusable Twig templates.

5. Why should components avoid page-specific logic?

Expected Answer:
To remain reusable and maintain separation of concerns.

6. How does component-driven theming improve maintainability?

Expected Answer:
It reduces global dependencies, isolates styling, and supports scalable design systems.