> ## Documentation Index
> Fetch the complete documentation index at: https://docs.makeswift.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Component basics

> Learn how to use and customize components in Makeswift.

Spend a few seconds exploring the Canvas and its components. You can click on any component in the Canvas to see its corresponding properties in the Properties Sidebar.

<Frame>
  <video autoPlay muted loop playsInline title="Components and properties" className="w-full aspect-video" src="https://mintcdn.com/makeswift/ttFYL1GC4O0eQWyS/images/quickstart/components-and-properties.mp4?fit=max&auto=format&n=ttFYL1GC4O0eQWyS&q=85&s=ad590c652d2bf189fd0aab39ac906b76" data-path="images/quickstart/components-and-properties.mp4" />
</Frame>

## Selecting components

To better understand the structure of different layouts, you can use [Breadcrumbs](/product/layouts#selecting-components) which allow finer granularity on navigating and selecting components. To activate Breadcrumbs, hover over the label of a component and you'll see a list of its ancestors.

<Frame>
  <video autoPlay muted loop playsInline title="Components and properties" className="w-full aspect-video" src="https://mintcdn.com/makeswift/ttFYL1GC4O0eQWyS/images/quickstart/breadcrumbs.mp4?fit=max&auto=format&n=ttFYL1GC4O0eQWyS&q=85&s=8e80b20fc2b41c20eef1f12c63b6dac9" data-path="images/quickstart/breadcrumbs.mp4" />
</Frame>

You can also use the [Elements Panel](/product/builder-basics#elements-panel) to easily view and select individual components from your page.

<Frame>
  <img
    src="https://mintcdn.com/makeswift/G15o5Myy8rXEUbA7/images/builder/elements-panel.jpeg?fit=max&auto=format&n=G15o5Myy8rXEUbA7&q=85&s=e52c7a84343246d5e6b260c3b5b93150"
    alt="Visual builder showing the elements
panel"
    width="1600"
    height="1188"
    data-path="images/builder/elements-panel.jpeg"
  />
</Frame>

## Customizing the hero

Now that you understand the basic layout of components, let's start to make some changes. Click once on the Text component that says **This is a header for this company** to select it. You can also double click the component to update its text inline.

Update that text to say **Welcome to Makeswift**.

<Frame>
  <video autoPlay muted loop playsInline title="Update hero text" className="w-full aspect-video" src="https://mintcdn.com/makeswift/ttFYL1GC4O0eQWyS/images/quickstart/update-hero-text.mp4?fit=max&auto=format&n=ttFYL1GC4O0eQWyS&q=85&s=11001f3131cef6f12d83dff692600c95" data-path="images/quickstart/update-hero-text.mp4" />
</Frame>

<Note>
  There are several built-in components in Makeswift including
  [Box](/product/components#box), [Text](/product/components#text),
  [Image](/product/components#image), and several more. For full reference,
  check out the [Component docs](/product/components).
</Note>

Notice that you've lost the green accent color in the text. To fix this, select the text **Makeswift**. In the Properties Sidebar, under the **Text style** panel, click the color picker. Then, choose the green accent color.

<Frame>
  <video autoPlay muted loop playsInline title="Update hero text color" className="w-full aspect-video" src="https://mintcdn.com/makeswift/ttFYL1GC4O0eQWyS/images/quickstart/hero-text-color.mp4?fit=max&auto=format&n=ttFYL1GC4O0eQWyS&q=85&s=6b981cf017c55e133fb5cc3bfda9264f" data-path="images/quickstart/hero-text-color.mp4" />
</Frame>

There are various properties you can change for each selected component. For example, with Text components, you can change font size, weight, color, and more. You can also save these settings to be reused in your site. You'll learn more about this in the next section.

## In the next section...

You'll learn how to customize colors and text styles to define your site's look and feel.