# Lesson 4 - Components

Build the reusable field sets that make a single Product model work for four different product types, and compose flexible landing page sections.

This section covers building the components the e-commerce project needs and attaching them to the correct models.

A component is a reusable set of fields defined once in the schema and embedded in models as a basic or modular component field. The components built here solve two specific problems in this project. The `Product Variant` modular component makes it possible for a single `Product` model to handle clothing, shoes, accessories, and decor, each with its own required fields, without creating four separate models. The `Stripes` modular component on the `Landing page` model gives editors the ability to compose pages from a variable combination of CTA and Product Grid sections.

By the end of lesson 4.2, the following models are updated:

- `Product` — `Product Variant` and `Related Products` components attached
- `Landing page` — `Stripes` modular component attached
- `Navigation` — `Nav Link` component attached, completing the model left open in lesson 1.2

## Components and component fields

A component and a component field are two different things. You create the component first, then embed it in a model using a component field.

Hygraph supports two types of component fields:

| Type | What it does |
|---|---|
| Basic component field | Embeds a single component type. Use this when the field always contains the same structure. |
| Modular component field | Allows editors to choose from a set of component types. Use this when editors need to select which component fills the field. |

The product type components (`Clothing`, `Shoes`, `Accessories`, `Decor`) use a modular component field inside `Product Variant` because the content editor needs to present a choice. The `Related Products` component uses a basic component field because no choice is required. It always contains the same structure.

## Build order matters

Some components depend on others. Build them in this order:

1. Related Products
2. Clothing, Shoes, Accessories, Decor (in any order)
3. Product Variant (depends on 2)
4. Button
5. Call to Action (depends on 4)
6. Product Grid
7. Link component modification (pre-built in the cloned project)

For the complete components documentation, see [Components](https://hygraph.com/docs/developer-guides/schema/components).

## Lessons in this section

| Lesson | What you will do |
|---|---|
| [4.1 Build components](https://hygraph.com/docs/getting-started/tutorial/tutorial-build-components) | Create components and configure their fields, references, and nested component fields |
| [4.2 Add components to your models](https://hygraph.com/docs/getting-started/tutorial/tutorial-add-components-to-models) | Attach the components to the `Product`, `Landing page`, and `Navigation` models to complete the schema |

## What's next

[Lesson 4.1 - Build components](https://hygraph.com/docs/getting-started/tutorial/tutorial-build-components)

Or, go to the [Tutorial overview](https://hygraph.com/docs/getting-started/tutorial/tutorial-overview) for the full lesson list.