> ## Documentation Index
> Fetch the complete documentation index at: https://rive-components.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Components
> Create reusable artboards that can be instanced throughout your Rive files.
export const YouTube = ({id, timestamp}) => {
const videoSrc = timestamp ? `https://www.youtube.com/embed/${id}?start=${timestamp}` : `https://www.youtube.com/embed/${id}`;
return ;
};
Components are reusable artboards. Create a component once, then use customized instances of it throughout your Rive file. Changes made to the source component are reflected across all of its instances.
You can use components in several ways:
* Place a component inside another artboard as a nested component.
* Reference a component from a [View Model property](/editor/data-binding/property-types#view-model), allowing you to swap them at runtime.
* [Instantiate components from scripts](/scripting/protocols/node-scripts#instantiating-components).
* Use components as items in [Lists](/editor/data-binding/lists).
Components can include their own graphics, animations, state machines, and data, allowing you to build complex experiences from smaller, reusable pieces.
## Creating a Component
### Converting Artboards to Components
Any artboard can be converted into a reusable component.
Select an artboard.
In the Inspector, select the **Component** icon or press `Shift` + `N`.
You can identify components by their purple artboard title on the stage.
Artboards that aren't components aren't exported with your Rive file. This can be useful for artboards used only while authoring, such as tests or reference artboards.
### Converting Objects to Components
You can select one or more objects on an artboard and convert them into a new component.
Select the object or objects you want to convert.
Right-click the selection and select **Create Component**.
Rive creates a new component containing the selected objects and replaces the original selection with an instance of that component.
**Animations and State Machines**
If the selected objects are animated by a timeline on the original artboard, the relevant keys are removed from that timeline and copied to a new timeline inside the component.
State machines aren't copied to the new component. State machines can depend on objects, animations, data, and other elements outside the selection, so you'll need to create a new state machine inside the component.
Data bindings are copied to the new component, but their view models are not.
#### Troubleshooting
Components are self-contained, so Rive can't create a component if the selection depends on objects outside of it. Make sure you include any required dependencies in your selection.
For example, a draw order dependency that crosses the new component's boundary will prevent the component from being created and display the **"Can't create component"** error: **"These dependencies point across the new component's boundary and would break."**
## Placing Components
Use the **Component Tool**, formerly known as the Nested Artboard Tool, to place instances of components on the stage. Select the tool from the toolbar or press `N`.
Click anywhere on the stage to choose from the available components and place an instance at that location.
If an artboard doesn't appear in the component menu, make sure you've [converted it to a component](#converting-artboards-to-components).
Alternatively, use the dropdown next to the **Component Tool** to choose a component before placing it.
The component menu follows the sort mode used in the Assets panel:
* **Custom** displays components as they're organized in the Assets panel.
* **Source/Type** groups components by their source. This is particularly useful when working with [Libraries](/editor/libraries).
## Editing Components
Double-click a component instance to open its source component. Changes you make to the source component are reflected in all of its instances, while properties configured on individual instances remain unchanged.
## Component Instance Properties
Select a component instance to configure its properties in the Inspector. These properties control the data, animation, source, layout, and other behavior of that specific instance without changing the source component.
You can't change the origin of a component instance directly. To use a different origin, place the component instance inside a group and adjust the group's origin instead.
### Source
**Source** determines which component is displayed by the instance. Select a component directly, or data bind the source to change the component dynamically.
Learn more about [Data Binding](/editor/data-binding).
### Data
Configure the data used by a component instance.
**Stateful Components**
If the component is a [Stateful Component](/editor/data-binding/stateful-components), you can set its exposed properties directly on the component instance.
**Model**
Use **Model** to set the view model instance used by the component.
* **Inherit** uses a compatible view model instance from the closest parent.
* To specify an instance, add a **View Model** property to the parent's view model and assign an instance to it. You can then select that property as the component's **Model**.
Learn more about [View Models and Instances](/editor/data-binding/view-models).
### Mode
**Mode** determines how the component instance sizes and responds to the space available from its parent. See [Component Sizing](/editor/layouts/component-sizing) for more information about sizing modes and their properties.
### Animations
Choose the animations that play on a component instance. In most cases, you'll want to select a state machine, but you can also add one or more timeline animations.
**State Machine**
Select a state machine to run on the component instance. You can adjust its playback **Speed** and enable **Quantize**.
**Timeline Animations**
Add timeline animations to play on their own, alongside a state machine, or layered with other animations. When adding a timeline animation, choose between **Simple** and **Remap**.
**Simple** plays the timeline normally and provides the following controls:
* **Mix** controls how much the animation contributes when mixed with other animations.
* **Speed** controls the animation's playback speed.
* **Playing** controls whether the animation is playing.
**Remap** lets you control the position of the animation's playhead directly:
* **Mix** controls how much the animation contributes when mixed with other animations.
* **Time** controls the animation's playhead as a percentage, where `0%` is the beginning and `100%` is the end.