Installation
Initialize a Remotion project with RemotionUI.
New project
01Initialize
$ npx remotion-ui@latest init my-video02Add
$ npx remotion-ui@latest add social-clip03Render
$ npx remotion render src/Root.tsx SocialClip out/social-clip.mp4out/social-clip.mp4
$ cd my-video && npm run devOpen the Remotion Studio URL from your terminal, then add your first component:
$ npx remotion-ui@latest add fade-inExisting project
Run init --existing from the root of an existing Remotion project. It writes remotion-ui.json, checks your path aliases, and installs the agent skill:
$ npx remotion-ui@latest init --existingThat generates this config, which you can edit afterwards:
{
"preset": "default",
"aliases": {
"primitives": "@/remotion/primitives",
"scenes": "@/remotion/scenes",
"compositions": "@/compositions",
"lib": "@/remotion/lib",
"hooks": "@/remotion/hooks"
}
}Then add components:
$ npx remotion-ui@latest add fade-in$ npx remotion-ui@latest add lower-thirdRun npx remotion-ui@latest add from your project root so the CLI can read remotion-ui.json and resolve aliases.
Verify the setup at any time:
$ npx remotion-ui@latest doctorWhat add does for you
- Installs the component source plus every registry dependency it pulls in, recursively.
- Installs npm dependencies with your detected package manager.
- Registers compositions in
Root.tsxautomatically — components that ship composition metadata get their<Composition />entry and import added for you. Already-registered ids are left alone, so re-runningaddis safe. - Warns when a component declares a Remotion range your project does not satisfy.
Agent skill
init --existing installs a Claude Code skill at .claude/skills/remotionui-agent/SKILL.md by default, so agents working in the repo know the install-before-import workflow and the animation rules.
npx remotion-ui@latest init --existing --no-agent-skill # skip it
npx remotion-ui@latest init my-video --agent-skill # opt in for a new projectNew projects do not install the skill unless you pass --agent-skill.
Next steps
- CLI Reference: flags,
--jsonoutput, error codes, and version compatibility - MCP Server: expose the registry as agent tools
- Authoring scenes: layout patterns for multi-element scenes
- Components: browse all motion building blocks
If RemotionUI saves you time, star the repo on GitHub — it helps a lot.