Components let you define reusable groups of fields once and use them across models and content entries. They help reduce duplication and keep content structures consistent across your schema.

#Key terms

#Why use components

Components are useful when you need to:

• Reuse the same group of fields across multiple models without redefining them
• Reduce schema duplication and maintenance overhead
• Keep complex content models easier to manage as they scale

This saves time and improves the content editing experience.

#Components vs. references

Both components and references support reuse, but they serve different purposes:

• Components reuse a field structure. Each component instance stores its own unique content within the entry.
• References reuse existing content entries from another model.

Example: Attaching authors to blog posts

For more detailed guidance, see Components or references.

#Add a component to your model

Adding a component involves two steps:

1. Create a component.
2. Add a component field to your model.

#Create a component

Creating a component in the Schema Builder

1. Open the Schema Builder.
2. In the left sidebar, locate the Components section below your models and click + Add.
3. Enter a name in the Display name field. The API ID and Plural API ID fields are auto-populated, but you can edit them.
4. Click Create component.
5. Your new component is empty. Add fields to define its structure.

Example: An Address component might include single-line text fields for address lines and city, and a number field for ZIP code.

#Add a component field to your model

Adding a component field to a model in the Schema Builder

1. Open the Schema Builder and select the model you want to update.
2. From the Field types sidebar, select a component field type:
   • Basic: embeds a single component type.
   • Modular: embeds two or more component types.
3. Enter a Display name. The API ID and Plural API ID are auto-populated but editable. Optionally, add a Description.
4. Toggle Allow multiple values if the field should accept more than one component instance.
5. Assign the components:
   • Basic: Use Select component to choose one component.
   • Modular: Use Select allowed components to choose multiple components.
6. On the Validations tab, optionally mark the field as required.
7. On the Advanced tab, optionally enable conditional visibility to show the component field only when specific conditions are met. This is helpful for schemas with deeply nested structures.
8. Click Add.

#Use a component in a content entry

After adding a component to your model, open the Content Editor to test it. The video above demonstrates four common configurations:

• Basic component field — single value
• Basic component field — multiple values
• Modular component field — single value
• Modular component field — multiple values

To add a component instance to an entry:

1. In the Content Editor, open the relevant model and click + Add entry.
2. Locate the component field in the entry form.
3. Add a component instance:
   • Basic component field: Click + Add component.
   • Modular component field: Select a component from the dropdown.
4. Fill in the component instance fields.
5. If the field supports multiple instances, you can also:
   • Duplicate an instance: Click the context menu and select Duplicate. This copies the instance and its content.
   • Copy: Click the context menu and select Copy. This copies the instance and its content. You can then paste the component into the same entry or a different entry. See Copy and paste component instances for more details.
   • Add another instance: Click + Add new component, or use Add new item above / Add new item below from the context menu.
   • Reorder: Use the context menu or arrow controls to reorder instances.
   • Remove: Click the context menu and select Remove. This deletes the instance.
   • Remove all: Click Remove all. This deletes all instances at once.

#Copy and paste component instances

You can copy a component instance from one entry and paste it into the same entry or a different entry, as long as the target entry allows the same component type. This also works with locales and nested components.

To copy and paste a component instance:

1. In the Content Editor, open the entry containing the component instance you want to copy.
2. Open the context menu on the component instance and select Copy.
3. Navigate to the target entry. This can be the same entry or a different one.
4. On the target component field, paste the copied component instance at the bottom of the list, or above or below a specific instance.
   • At the bottom: Click + Paste component.
   • Above a specific instance: Click the context menu and select Paste component above.
   • Below a specific instance: Click the context menu and select Paste component below.

The pasted instance will appear with all its content pre-filled.

#Nested components

Nested components let you add component fields inside other components, enabling hierarchical content structures.

Example: Create a Section component and a Subsection component, then nest the subsection inside the section.

Adding a nested component in the Schema Builder

1. Open a component you've already created.
2. From the Field types sidebar, add a Basic or Modular component field to the parent component.
3. Enter the Display name. The API ID and Plural API ID are auto-populated but editable. Optionally, add a Description.
4. Assign the child components. Select a single component for a Basic component field, or multiple components for a Modular component field.
   • Important: Only components you've already created appear in the dropdown. Make sure all required components exist before this step.
5. Click Add.

The nested component field now appears in the parent component's field list.

#Use nested components in an entry

After setting up a nested component in the Schema Builder, open a new entry and add the nested component as a subsection within the parent component.

Adding nested components in a content entry

#Related docs

• API reference for components — How to query components via the API.
• Components or references — Guidance on when to use components vs. references.