Skip to main content

Components

A Component is a reusable artboard (a self-contained canvas you can place multiple times). Change the source artboard once, and every copy updates automatically.

Creating a Component​

Select an artboard and click the Component icon in the Inspector to mark it as a component.

Shortcuts:

  • Shift + N — toggle component
  • Cmd/Ctrl + Alt/Option + K — (same as Figma's component shortcut)
  • Shift + Alt/Option + N — revert to a regular artboard
info

Only artboards marked as components are exported to the .riv file. If you need to access an artboard at runtime, mark it as a component.

Using Components​

Select the Component Tool (N) from the Toolbar. Click on the Stage to place an instance (a copy of the component). A menu shows available components to choose from.

Adding a component

You can also pick the component first using the dropdown next to the toolbar icon, then click to place it.

Configuring an Instance​

Select a placed instance to configure it in the Inspector.

State Machines​

Assign a state machine (a logic graph that controls how animations play and respond to input) to the instance for interactive playback.

Component state machine

Adding Animations​

Click the + button in the Inspector to add an animation to the instance. Two types are available:

Simple — Plays the animation directly on the timeline. You can key the start point and adjust playback speed.

Remap — Time is expressed as a percentage (0% = start, 100% = end), so you can stretch, shrink, or reverse the animation.

Mix Value​

The Mix Value controls how animations blend when more than one is active — think of it like a volume fader for each animation. It runs from 0% (no contribution) to 100% (full contribution).

To play one animation cleanly, set Mix to 100% for the animation you want to show and 0% for all others.

Instance Modes​

Each component instance runs in one of three modes. Think of these like layout rules: they tell the component how to size and position itself inside its parent.

Node (default)​

Used for non-responsive layouts. The component scales using its Scale property.

Leaf​

The component sizes and positions itself relative to its parent layout or artboard. Use Leaf mode when the component should fill its container but does not use Rive's layout system internally.

Leaf Fit options: Fill · Contain · Cover · Fit Width · Fit Height · None · Scale Down

Leaf Alignment: 3×3 grid (Center, Top Left, Bottom Right, etc.), or use numeric X/Y values for fine control.

Layout​

Use this when your component contains Rive layouts that need to reflow (automatically repositioning content as the container size changes) as the parent size changes. The artboard resizes to reflow content — it does not scale.

Layout Scale Type: Fixed · Hug · Fill