Components

Components are reusable pieces of code that power your scenes. Build a title animation once, use it across every video. Components keep your work consistent and save you from rewriting the same patterns.

What components are

A component is a React function that renders visual content using Remotion. Unlike scenes (which are tied to a specific composition), components exist independently in your library. When you add a scene that uses a component, it references that component by ID.

import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";

export default function TitleCard({ title, subtitle }) {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1]);

  return (
    <AbsoluteFill style={{
      backgroundColor: "#000",
      justifyContent: "center",
      alignItems: "center"
    }}>
      <h1 style={{ color: "white", fontSize: 72, opacity }}>
        {title}
      </h1>
      {subtitle && (
        <p style={{ color: "#888", fontSize: 36, opacity }}>
          {subtitle}
        </p>
      )}
    </AbsoluteFill>
  );
}

Components can accept props, which are parameters that customize each instance. The same TitleCard component could show "Welcome" in one video and "Thanks for watching" in another.

Component library

Access your components from the dashboard under Components, or directly at /components.

• A grid of all components you can access
• Component name and type
• Public badge for shared components

Creating components

From scratch

Click "New Component" in the library. You'll get a starter template:

export default function NewComponent() {
  return (
    <AbsoluteFill style={{ backgroundColor: "#ffffff" }}>
      <h1 style={{ fontSize: "48px" }}>New Component</h1>
    </AbsoluteFill>
  );
}

Edit the code, configure the metadata, and save.

From a scene

Built something great in a composition? Save it as a component. In the editor, select the scene and choose "Save as Component." Give it a name and it's added to your library for future use.

Component editor

The component editor gives you everything you need to build and test:

Code editor

Monaco-powered editing with full TypeScript/JSX support. Write your component code with syntax highlighting, auto-completion, and error checking.

Multi-file support

Components can span multiple files. Add utility functions, styles, or sub-components in separate files and import them:

index.tsx      (entry point)
utils.ts       (helper functions)
animations.ts  (shared animations)

Set the entry point to specify which file exports the main component.

Props panel

Define props with TypeScript types, and the editor generates a form automatically:

interface Props {
  title: string;
  color?: string;
  showLogo: boolean;
}

This creates form fields for each prop so you can test different configurations.

Live preview

See your component rendered in real-time as you edit. The preview uses Remotion's player, showing exactly how it will look in a video.

Using components in scenes

When you add a scene to a composition, you can reference a component:

Components are fetched at render time, so updates to a component automatically apply to all scenes using it.

Props system

Props make components flexible. Define them with TypeScript types:

interface Props {
  title: string;           // required
  subtitle?: string;       // optional
  duration?: number;       // optional with default
}

export default function Hero({
  title,
  subtitle = "Default subtitle",
  duration = 5
}: Props) {
  // ...
}

Sharing components

Registry system

Components can be published to the registry for CLI and external tool access. The registry provides:

• Unique names (my-org/title-card)
• Versioning (semantic versions)
• Dependencies (components that require other components)

Best practices

Want to connect external AI providers? Check out Integrations.