imgcli
← Blog

How to install Remotion components with the shadcn CLI

The shadcn CLI installs Remotion components as source into your video project. Remotion is not a framework shadcn recognises, so it takes three small config steps first — here they are, and the errors you hit without them.

Short answer: create a Remotion project, write a components.json by hand (shadcn init does not recognise Remotion), add the @/ alias to both tsconfig.json and remotion.config.ts, then run npx shadcn@latest add https://imgcli.com/r/<name>.json. The component's source lands in your project and is yours to edit.

Why shadcn for video components

A video component is a thing you tweak — timing, copy, colour. The shadcn CLI copies the source into your project and installs its declared dependencies. You can edit the copied files directly.

1. Start with a Remotion project

npx create-video@latest

2. Teach the project the @/ alias — twice

Components import @/components/imgcli/… and @/lib/snap-cn-ui. A create-video project has no @ alias, and Remotion's bundler does not read tsconfig paths, so an import that works in your editor fails in the render. Set it in both places:

tsconfig.json
{
  "compilerOptions": {
    "paths": { "@/*": ["./src/*"] }
  }
}

On TypeScript 5, add "baseUrl": "." beside it. TypeScript 7 removed baseUrl and errors on it, so leave it out there.

remotion.config.ts
import path from "node:path";
import { Config } from "@remotion/cli/config";
import { enableTailwind } from "@remotion/tailwind-v4";

Config.overrideBundlerConfig((config) => {
  const c = enableTailwind(config);
  return {
    ...c,
    resolve: {
      ...c.resolve,
      alias: { ...c.resolve?.alias, "@": path.join(process.cwd(), "src") },
    },
  };
});

3. Write components.json

The CLI reads this to know where files go. npx shadcn@latest init only writes one in a framework it recognises, and Remotion is not one, so create it:

components.json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/index.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}

4. Add a component

npx shadcn@latest add https://imgcli.com/r/text-reveal.json

A full Imgcli Registry URL works directly. To use @imgcli short commands, add the mapping from the installation guide.

npx shadcn@latest add https://imgcli.com/r/prompt-send.json https://imgcli.com/r/answer-stream.json https://imgcli.com/r/laptop-frame.json

5. Use it and render

import { Composition } from "remotion";
import { TextReveal } from "@/components/imgcli/text-reveal";

export const RemotionRoot = () => (
  <Composition
    id="HelloWorld"
    component={TextReveal}
    durationInFrames={60}
    fps={30}
    width={1280}
    height={720}
    defaultProps={{ text: "Hello, world", mode: "dark" }}
  />
);
npx remotion render HelloWorld out.mp4

Note mode: "dark". A render with no background of its own is black, and components default to shadcn's light palette — without it, near-black text lands on a near-black frame.

Errors you will hit, and why

SymptomCauseFix
Module not found: @/components/... at render, fine in the editorBundler has no @ aliasStep 2, remotion.config.ts
shadcn init does not set the project upRemotion is not a framework it recognisesWrite components.json by hand (step 3)
baseUrl error from TypeScriptTypeScript 7 removed itDelete baseUrl
Render is a black frame, text invisibleLight palette on a black rendermode="dark" or a background

Let an agent do it

If you use a coding agent, give it the Imgcli component index alongside the installation guide.

Next: how to animate text in Remotion, or browse all components.

FAQ

Does shadcn work with Remotion?

Yes. The shadcn CLI can install components from any registry into a Remotion project. Because shadcn init does not recognise Remotion, you write components.json yourself and add the @ path alias to both tsconfig.json and remotion.config.ts.

Why does my shadcn component import fail at render time in Remotion?

Remotion's bundler does not read tsconfig paths. An @/ import resolves in your editor but fails in the render until you add the same alias to the bundler in remotion.config.ts.

Why is my text invisible when I render an Imgcli component?

A Remotion render with no background is black, and components default to shadcn's light palette. Pass mode dark, or your own theme, or put a light background behind the scene.

What does npx shadcn add https://imgcli.com/r/text-reveal.json install?

It copies text-reveal.tsx into src/components/imgcli/ and the small lib/snap-cn-ui core it depends on, and installs any npm packages the component imports. You own and can edit every file.