---
title: "Get started with the Component builder"
slug: "get-started-with-the-component-builder"
abstract: "Learn the basics of building a component from scratch to publishing it with the Component builder."
---

# Get started with the Component builder

This topic provides an overview of the steps you take when creating a component with the Component builder. For many of the steps, we provide a link to more detailed documentation. This guide is intended to be a starting point for understanding the component creation flow, and you can read more in the linked documentation.

> [!note]
> Instead of starting a component from scratch, it is also possible to [import a copy of shared components](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/get-started-with-the-component-builder/shared-libraries.html "Shared libraries") that can be used as starting point to create your own.

To build a component from scratch:

1. In the navigation header, click **Design**. Then, in the left sidebar, click the **Component builder** link.
2. In the Component builder, on the **Components** tab, click **Add component**.
3. In the [Creating new component](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/prototyping-components/work-with-components.html "Work with components") dialog, enter a name for the component and choose the Collection the component belongs to. Click **Save**.
4. Click the component to start editing.
5. The empty component canvas is a section that contains a grid. To start working on the layout of the component, click and drag on the grid to [draw one or more containers](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/prototyping-components/work-with-a-component-layout.html "Work with a component layout"). You can move these containers by dragging them on the grid, and you can change their size at any time.
6. Click a container to open the corresponding context bar. In the context bar, you can see that the container is automatically assigned the type **Block**. To change the type of each container, click the arrow near the **Block** name, and choose another block element, such as **Card**, **Image**, **Block quote**, **Component**, or **HTML block**.
7. In the container, you can now click **[Add element](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/prototyping-components/use-elements-to-build-components.html "Use elements to build components")** to add another **Block element**, or a **Text element**, an **Inline element** inside a container. You can also [wrap](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/wrapping-code-in-a-component.html "Wrapping code in a component") another component in your component. Learn more about the various types of [elements](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/get-started-with-the-component-builder/components-key-concepts-and-terms.html "Components key concepts and terms") here.
8. You can then add static or [dynamic](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/adding-dynamic-content-to-a-component.html "Adding dynamic content to a component") content to your elements, as well as [configure](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/prototyping-components/configuring-an-element.html "Configuring an element") and [style](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/styling-components.html "Styling components") the element.
9. Optionally, to create a responsive component, add as many versions for different device types by clicking **Add version** or **Duplicate version** as many times as needed. You can use the breakpoint settings :mdiCellphoneLink: tool to specify device types to be used for each version.
10. When your component is ready, you can [stage](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/using-components-in-a-webpage/staging-and-publishing-components.html "Staging and publishing components") it to be used in the Page builder, and [publish](https://doc.sitecore.com/sai/en/users/sitecoreai/publish-content-in-sitecoreai.html "Publish content in SitecoreAI") it to be available publicly on your website. You can also [get the embedding code of the component](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/using-components-in-a-webpage/get-the-embedding-code-of-a-component.html "Get the embedding code of a component") (including all its versions in case of responsive components) so you can use it in other page builders.