Set up your Remotion project's aliases and install a free Imgcli component with the shadcn CLI.

Start with a Remotion project. Run npx create-video@latest if you need one.

1. Teach your project the `@/` alias

Components are copied in importing @/components/imgcli/… and @/lib/snap-cn-ui. A create-video project has no @ alias, and Remotion's bundler does not read tsconfig paths — so set it in both places, or the import resolves in your editor and fails at render.

tsconfig.json

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

On TypeScript 5 you also need "baseUrl": "." alongside it. TypeScript 7 removed baseUrl and errors on it — paths are resolved relative to the tsconfig.json now, so leave it out. create-video scaffolds neither.

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") },
    },
  };
});

2. Add a `components.json`

The shadcn CLI reads this to know where files go. npx shadcn@latest init writes one for you — but only in a framework it recognises, and Remotion is not one of them, so write it yourself:

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"
}

3. Add a component

$ pnpm dlx shadcn@latest add https://imgcli.com/r/text-reveal.json

Needs an existing Remotion project and a components.json. Two-minute setup if this is your first Imgcli component.

How it works

The URL points to Imgcli's registry. The CLI copies text-reveal.tsx to src/components/imgcli/ and adds the shared files under src/lib/snap-cn-ui/. You can install the free components without an account or API key.

For shorter commands, add this mapping to your components.json. Keep any registry mappings you already use.

components.json

{
  "registries": {
    "@imgcli": "https://imgcli.com/r/{name}.json"
  }
}

npx shadcn@latest add @imgcli/text-reveal

Component code

The exact file shadcn add copies into your project.

Install everything

Want the whole library at once?

$ pnpm dlx shadcn@latest add https://imgcli.com/r/answer-highlight.json https://imgcli.com/r/agent-steps.json https://imgcli.com/r/announce-title.json https://imgcli.com/r/answer-stream.json https://imgcli.com/r/text-reveal.json https://imgcli.com/r/text-highlight.json https://imgcli.com/r/text-rewrite.json https://imgcli.com/r/text-select.json https://imgcli.com/r/text-swap.json https://imgcli.com/r/text-swell.json https://imgcli.com/r/text-build.json https://imgcli.com/r/word-flip.json https://imgcli.com/r/word-captions.json https://imgcli.com/r/karaoke-captions.json https://imgcli.com/r/logo-drift.json https://imgcli.com/r/logo-assemble.json https://imgcli.com/r/logo-flicker.json https://imgcli.com/r/block-wordmark.json https://imgcli.com/r/phone-frame.json https://imgcli.com/r/laptop-frame.json https://imgcli.com/r/terminal-simulator.json https://imgcli.com/r/screen-recording.json https://imgcli.com/r/count-grid.json https://imgcli.com/r/roster-grant.json https://imgcli.com/r/wordmark-cut.json https://imgcli.com/r/cursor-track.json https://imgcli.com/r/pulsing-border.json https://imgcli.com/r/follower-rush.json https://imgcli.com/r/prompt-send.json https://imgcli.com/r/prompt-zoom.json https://imgcli.com/r/punch-lines.json https://imgcli.com/r/orbit-gallery.json https://imgcli.com/r/hero-launch.json https://imgcli.com/r/moodboard-reveal.json https://imgcli.com/r/reel-collage.json https://imgcli.com/r/reel-wall.json https://imgcli.com/r/phone-stack.json https://imgcli.com/r/portal-intro.json https://imgcli.com/r/dot-bloom.json https://imgcli.com/r/hello-zoom.json https://imgcli.com/r/spec-sweep.json https://imgcli.com/r/drop-line.json https://imgcli.com/r/title-sweep.json https://imgcli.com/r/cut-lockup.json https://imgcli.com/r/bloom-lockup.json https://imgcli.com/r/gather-lockup.json https://imgcli.com/r/sky-lockup.json https://imgcli.com/r/search-typing.json https://imgcli.com/r/status-cycle.json https://imgcli.com/r/type-morph.json https://imgcli.com/r/orb-swarm.json https://imgcli.com/r/word-gather.json https://imgcli.com/r/word-wheel.json https://imgcli.com/r/brand-wheel.json https://imgcli.com/r/check-cycle.json https://imgcli.com/r/font-shuffle.json https://imgcli.com/r/button-press.json https://imgcli.com/r/click-type.json https://imgcli.com/r/capture-reveal.json https://imgcli.com/r/channel-thread.json https://imgcli.com/r/logo-collapse.json https://imgcli.com/r/card-rail.json https://imgcli.com/r/snap-cn-ui.json https://imgcli.com/r/caret.json https://imgcli.com/r/input.json

4. Use it in a Remotion composition

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" }}
  />
);

Components take shadcn's light palette by default, and a Remotion render with no background of its own is black — so pass mode="dark" (or your own theme) when you render onto a dark frame, or near-black text lands on a near-black background.

That's it. Render with npx remotion render HelloWorld out.mp4.

For Claude Code, Cursor, or another coding agent, see the Imgcli Skills and plugin instructions.

Installation

1. Teach your project the @/ alias

2. Add a components.json