---
title: "Components"
date: "2025-07-24T07:08:34+00:00"
summary: "Discover reusable components for building digital experiences. Learn about types, instances, settings, and styling in our comprehensive guide."
image:
type: "page"
url: "/acquia-source/components"
id: "29450c38-d439-42e6-b08f-56948739749f"
---

Components are specific building blocks of your digital experience that can be used within the Drupal Canvas user interface. They encapsulate functionality, design, and content to create reusable elements across your site. They can be used to build pages, header and footer, and other components.

The Drupal Canvas user interface includes the Component Library, which consists of a drag-and-drop component system to help you create and customize pages efficiently. With Component Library, you can add sections and components to pages directly. It works in conjunction with the design system approach to help teams maintain consistent style and interaction patterns across pages.

Each component consists of the following elements:

Term

Definition

JavaScript

Defines the behavior of the component. Components are rendered using [Preact](https://preactjs.com/) with a [React compatibility layer](https://preactjs.com/guide/v10/switching-to-preact/).

Tailwind

Components and CSS may use [Tailwind CSS](https://tailwindcss.com/).

CSS

Controls the styling of the component.

Global CSS

Styling that applies across all instances.

Props

Configurable properties that change the appearance or behavior of the component.

Slots

Areas where other components can be placed.

![acquia-source_component](https://acquia.widen.net/content/9082deb6-557c-4ae5-aa4a-b2cf33190644/web/b0292_acquia-source_component.png?w=720&itok=2CmwevqY)

The following table lists the terms related to components:

Term

Definition

Component Type

The definition or template of a component that defines its structure and properties. For example, the Button component.

Component Instance

A specific occurrence of a component on a page with its own unique configuration. For example, the Submit button in a form. It has its own unique configuration and it can be moved, copied, or deleted independently.

Component Settings

The configuration options for a specific instance that change the component’s appearance such as color and size, behaviors such as links and interactions, and connections to dynamic content sources.

Props

Configurable properties that change how a component looks or behaves.

Slots

Designated areas within components where other components can be placed.

Override

A customized version of a default component with modified properties or behavior.

Global Styles

Styling rules that apply to all instances of a component across the site.

Instance Styles

Styling applied to a specific instance of a component.