RemotionUI

206 copy-paste components for Remotion. Source you own, frame by frame.

Browse components · Quick start · CLI · MCP server

Install

npx remotion-ui@latest init my-video
cd my-video
npx remotion-ui@latest add social-clip

Already have a Remotion project? npx remotion-ui@latest init --existing.

Or install straight from the shadcn CLI — every component is published under the @remotionui namespace:

npx shadcn@latest add @remotionui/social-clip

What you get

add social-clip writes a 9:16 clip — hook, audiogram, captions, end card — into your repo as plain .tsx. Register it and render:

import { Composition } from "remotion";
import { SocialClip } from "@/compositions/social-clip/index";

export const RemotionRoot = () => (
  <Composition
    id="SocialClip"
    component={SocialClip}
    durationInFrames={228}
    fps={30}
    width={1080}
    height={1920}
    defaultProps={{
      hookTitle: "This line stops the scroll",
      podcastTitle: "Weekly Brief",
      ctaTitle: "Hear the full episode",
    }}
  />
);

Every prop is yours to change, and so is every frame behind it — the scenes, the easing, the transition timing.

Set it up with your agent

Paste this into Claude Code, Cursor, or any agent with shell access:

Set up RemotionUI in this project. Run `npx remotion-ui@latest init --existing --agent-skill`
to install the CLI config and the RemotionUI agent skill, then use
`npx remotion-ui@latest search -q <what I need> --json` to find components
and `npx remotion-ui@latest add <name>` to install them.

Every command speaks --json. There's also an agent index, llms.txt, and an MCP server for search-and-install over the registry.

What's inside

206 components, grouped by how they behave on the timeline:

Lane	Count	What it covers
Scenes	53	Composed layouts, cards, UI blocks
Primitives	51	Motion, text effects, backgrounds
Data & media	38	Captions, audio, charts, live metrics
Compositions	21	Full video templates, ready to render
Transitions	18	TransitionSeries scene cuts
Paths & shapes	11	SVG draw-on, logos, cursors
Maps & device	8	Map scenes and device mockups
Shaders	5	Full-frame GPU fields, evaluated per pixel
3D	1	WebGL scenes via @remotion/three

Six of them, actually moving:

Browse the full catalog →

Why it holds up under render

A component that looks right in the browser can still render wrong. Every component here is checked by rendering it and inspecting the actual output frames — not by screenshotting a preview — which is how the silent ones get caught: frozen tails, dead frames, delayRender gaps on map tiles, Math.random() that breaks determinism across a distributed render.

CLI

npx remotion-ui@latest search -q caption   # find components
npx remotion-ui@latest add caption-scene   # install with dependencies
npx remotion-ui@latest diff caption-scene  # see your edits vs registry
npx remotion-ui@latest doctor              # diagnose config and aliases

Full reference: remotionui.com/docs/cli

Guides

Build — Authoring scenes · Motion tokens · Transitions

Media — Captions · Audio visualization · Maps

Contributing

Component ideas, bug reports, and PRs are welcome — see CONTRIBUTING.md for the monorepo layout, dev setup, and how to author a registry component.

Built by @riaz37. If RemotionUI saved you a render, a ⭐ is how other people find it.

License

MIT