---
title: "Add Web Components to Drupal"
date: "2022-12-13T19:49:56+00:00"
summary:
image:
type: "article"
url: "/acquia-cloud-platform/help/88506-add-web-components-drupal"
id: "f2671b4b-8439-4f74-908c-c31bc33c22da"
---

Table of contents will be added

Goal
----

Add JavaScript components to a Drupal application as blocks.

Prerequisites
-------------

*   Composer must be installed on your local machine.

Overview
--------

For this tutorial, we are going to do the following:

*   Install [Acquia CMS](https://www.acquia.com/products/drupal-cloud/acquia-cms) [Community](/node/56699) using the [Acquia Drupal Recommended Project](https://github.com/acquia/drupal-recommended-project)
*   Add the [Component](https://www.drupal.org/project/component) and Component examples modules
*   Add a [React Calculator](https://git.drupalcode.org/project/component/-/tree/1.0.x/modules/component_example/components/example_react_calc) component to our site as a block

_Note: If you have an existing Drupal application, you can skip to step 3. The Component module works with Drupal 8 and above. You do not have to start with Acquia CMS._

1.  Create a Drupal application with Acquia Drupal Recommended Project
    ------------------------------------------------------------------
    
    Create a new project using Composer:
    
         composer create-project --no-interaction acquia/drupal-recommended-project
    
    You can learn more about [Creating a new Drupal application with Composer](https://dev.acquia.com/tutorial/creating-new-drupal-application-composer) from Matthew Grasmick's [tutorial](https://dev.acquia.com/tutorial/creating-new-drupal-application-composer).
    
2.  Install Acquia CMS Community
    ----------------------------
    
    Now that we have created our project; we can install the Acquia CMS Community starter kit.
    
         ./vendor/bin/acms acms:install
    
    This will ask you several questions about the starter kit you want to start from and any “add-ons” you want to add:
    
         Please choose bundle from one of the above use case [acquia_cms_community]: > acquia_cms_community
    
3.  Add the Component module
    ------------------------
    
    To add components to our Acquia CMS Community application, we need to add the [Component](https://www.drupal.org/project/component) module.
    
         composer require 'drupal/component'
    
    Now that the module has been added to our project, we can enable Component and Component example.
    
         drush en component component_example -y
    
4.  Display the React Calculator
    ----------------------------
    
    The Component example module includes four components available as blocks, Example blank, Example Config, Example React Calculator, and Example Tabs.
    
    ![Dialog box titled "Place block" with a search for "example," listing components like Example Blank and Example Config.](https://acquia.widen.net/content/fe2afd2d-5265-4ad7-a52c-977b485e431e/web/url_bde185af98c985030052a4cdfb6f1178.webp)
    
    Below you can see the Example React Calculator placed in the Olivero sidebar.
    
    ![Webpage with "Acquia CMS Community" header, placeholder text, and a calculator widget on the right. Navigation bar includes Home, Articles, Events, People, Places.](https://acquia.widen.net/content/102dfeeb-f30e-44b3-93bf-7fdf75defc79/web/url_e388713cd56f4bda7df94338637273ac.webp)
    

Adding an example component is only the beginning. The real value comes when you can start creating your own components. The [example components](https://git.drupalcode.org/project/component/-/tree/1.0.x/modules/component_example/components) are provided as a reference architecture. They provide examples of adding [form options](https://git.drupalcode.org/project/component/-/tree/1.0.x/modules/component_example/components/example_config) to the component so site builders can modify it as they would any Drupal block, how to use [shared libraries with React via CDN](https://git.drupalcode.org/project/component/-/tree/1.0.x/modules/component_example/components/example_react_lib), and how to use that library to create a [React component](https://git.drupalcode.org/project/component/-/tree/1.0.x/modules/component_example/components/example_react_calc). They also show how to use vanilla JavaScript to create a [Tabs component](https://git.drupalcode.org/project/component/-/tree/1.0.x/modules/component_example/components/example_tabs).

If you want inspiration for your custom component, consider browsing [Codepen](https://codepen.io/). One of my favorites in the [Impossible Checkbox](https://codepen.io/MrS4nty/pen/RwJNvxp). Using the calculator example as a guide, see if you can add the Impossible Checkbox to your Drupal application.

Additional Resources
--------------------

*   [Acquia Drupal Recommended Project](https://github.com/acquia/drupal-recommended-project)
*   [Creating a new Drupal application with Composer](https://dev.acquia.com/tutorial/creating-new-drupal-application-composer)
*   [Component module](https://www.drupal.org/project/component)