---
title: "Components"
description: "Make a part once and use it again and again, each copy with values of its own."
canonical: "https://terminal.lottiefiles.com/docs/components/"
last_updated: 2026-11-03
---

# Components

Make a part once and use it again and again, each copy with values of its own.

A component is a group made to be reused. Each layer that shows it is an **instance**. What's
inside, the **main**, is shared: change it inside any instance and every instance changes. The
main's [tokens](https://terminal.lottiefiles.com/docs/layers/data.md) are what each instance can change for itself: its words, its
colours, its numbers.

## Make one

Select layers and press `⌥⌃G` (**Make component** in the palette). They're grouped in place, and
the group is a component, named after the layer when it's one (Component otherwise). A group you
select becomes a component as it is, and every layer already showing it becomes an instance.

The rail's COMPONENT section shows its name and how many instances there are. `⌥⌃D` (the rail's
**+ another**) places another instance over the selected one, with its values.

## Change one instance

Go inside (`↵` on a selected instance) and make the values you want to change per instance into
tokens: click a value's name in the rail, or press `#` on its track.

Select an instance. The COMPONENT section lists the main's tokens, with this instance's values.
Click one and type: the value is this instance's own (●), and the others keep theirs. ↺ puts the
main's back, and **reset all** puts every one back. **Give the main this instance's values** in
the palette makes them the main's, so every instance that follows the main shows them.

Edits inside an instance change the main, and so every instance, except where an instance has a
value of its own.

An instance's own value is a token of its own, named after the instance and the token: card 2's
`accent` is `card-2.accent`. An app sets it as any token (`setColorSlot("card-2.accent", …)`);
`accent` sets the main's, for every instance that follows it.

**detach** makes an instance a group of its own, keeping its values: the main's changes no longer
reach it.

## The Components shelf

`⌥C` (**Components** in the palette) shows your components, each tile playing, to put on the stage:
**IN THIS FILE**, then **YOURS** (saved from any file), then, when Creator is started in your
app's folder, your app's screens and components (see [Capturing your app](https://terminal.lottiefiles.com/docs/capture.md#all-your-components)).
Arrows or `h j k l` move, `/` searches, `↵` puts the choice on the stage and `a` puts it there and
keeps the shelf open. One of this file's places another instance, showing the main.

**save to yours** in an instance's rail (**Save component to yours** in the palette) keeps the
component for every file. Saving one with the same name again replaces it. Placed in a file that
has it already, it's another instance of it there. Your components are kept in
`~/.config/motion/components/yours`, a Lottie file each: copy one to share it.

## In players

An instance with values of its own is written as a copy of the main with them, so ThorVG and
every dotLottie player draw it. In a `.lottie`, copies of a small component cost little.

Watch the [Components](https://terminal.lottiefiles.com/docs/not-yet.md#editing-and-playback) limits too.