How to install Remotion components with the shadcn CLI

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 @snapcn/<name>. 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 model fits that exactly: instead of an npm package you import and cannot change, the CLI copies the source into your project. No version pinning, no fighting a wrapper's props, no runtime dependency beyond Remotion.

1. Start with a Remotion project

npx create-video@latest

2. Teach the project the @/ alias — twice

Components import @/components/snap-cn/… 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:

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

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

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:

{
  "$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 @snapcn/text-reveal

@snapcn is in the shadcn registry directory, so the CLI resolves the name with no extra config. The file lands in src/components/snap-cn/, along with anything it depends on. Several at once works too:

npx shadcn@latest add @snapcn/prompt-send @snapcn/answer-stream @snapcn/laptop-frame

5. Use it and render

import { Composition } from "remotion";
import { TextReveal } from "@/components/snap-cn/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

Let an agent do it

If you use Claude Code or Cursor, the snapcn agent skill teaches it the catalogue and this setup: npx skills add snapcndev/snapcn.

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

FAQ