Skip to main content
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: 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.
1
Select an artboard.
2
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.
1
Select the object or objects you want to convert.
2
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.
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.

​
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.

​
Data

Configure the data used by a component instance. Stateful Components If the component is a Stateful Component, 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.

​
Mode

Mode determines how the component instance sizes and responds to the space available from its parent. See 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.