> This page is part of the [Customer.io documentation](https://docs.customer.io). For the complete index, see [llms.txt](https://docs.customer.io/llms.txt).
> Last updated: July 10, 2026

# Understand standard vs custom components

[BetaThis feature is new and we're actively working on it.](/accounts/settings/beta-experimental-features/#beta-features)

Components help you reuse content and structure across your Design Studio messages so you can build faster.

In Design Studio, you can use our out-of-the-box [**Standard Components**](#standard-components) and create your own [**Custom Components**](#custom-components).

## Standard components

Standard components are pre-built blocks that help you build beautiful, engaging messages as quickly as possible. They are the backbone of Design Studio messages — headings, paragraphs, buttons, sections, and more. You’ll see a list of available [standard components](/messaging/design-studio/reusable/standard-components/) in the insert menu of the visual editor. Once you’ve dragged a component onto the canvas, you can style it by adjusting the component’s properties.

Our standard components are:

*   **Accessible**: use our accessibility checker to ensure you’re following best practices.
*   **Responsive**: they scale down automatically to fit smaller viewports, but you can also change this for some standard components like columns.
*   Able to **inherit your styles**: for instance, if you nest multiple paragraph components within a box component, the paragraphs would inherit the text styles of the box.
*   **Lightweight**: to reduce code bloat.
*   **Flexible**: you can modify standard properties or add your own under Advanced in the Properties menu.

We created our standard components following the [Email Markup Consortium compliant standards](https://emailmarkup.org/en/docs/compliant-standards/) to help you make flexible, lightweight code. We maintain and update these components to ensure they’re compatible with the latest email client quirks and bugs.

## Custom components

[Custom components](/messaging/design-studio/reusable/components/create-custom-component/) are pieces of messages you can save and reuse—like headers and footers. Creating a custom component saves you time so you don’t have to re-create parts of messages, and helps you maintain consistency across messages.

Custom components help you:

*   **Build efficiently**: create a reusable block *once* then easily find it to reuse across future messages.
*   **Cascade changes from one source of truth**: update your component file so changes cascade to all messages using it.
*   **Streamline team collaboration**: Developers can create reusable code in JavaScript, HTML, and CSS, and marketers can drag them into the visual editor with no coding required.
*   **Create reusable, interactive features**: Interactive messages are time consuming to make, but with custom components you can make an interactive feature (like a survey) once, and reuse it as many times as you see fit.

*   *   [Standard components](#standard-components)
    *   [Custom components](#custom-components)

Copy page

Copy page [Download .md](/messaging/design-studio/reusable/components-overview.md)

Is this page helpful?

![](https://docs.customer.io/images/export-success.png) ![](https://docs.customer.io/images/export-failure.png)

# How can we make it better?

Close

Do you need help from Customer.io support?  No  
 Yes

What part of Customer.io do you need help with? 

How can we improve this page?

Email (optional):  Please provide a valid email address

 I am not a bot

 

We appreciate your feedback!

Our support team will contact you as soon as possible