Installation

snapcn assumes you already have Remotion installed. If you don't, run npx create-video@latest first.

1. Teach your project the @/ alias

Components are copied in importing @/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 set it in both places, or the import resolves in your editor and fails at render.

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

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:

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

@snap-cn is in the shadcn registry directory, so the CLI resolves the name with nothing else to configure. That copies text-reveal.tsx into src/components/snap-cn/ (or wherever your components.json points), plus the small lib/snap-cn-ui/ core it paints from. Anything a component depends on comes with it — you never install a second thing by hand.

Component code

The exact file shadcn add copies into your project.

Install everything

Want the whole library at once?

$ pnpm dlx shadcn@latest add @snap-cn/answer-stream @snap-cn/text-reveal @snap-cn/text-highlight @snap-cn/text-swap @snap-cn/text-swell @snap-cn/text-build @snap-cn/word-flip @snap-cn/word-captions @snap-cn/karaoke-captions @snap-cn/logo-assemble @snap-cn/logo-flicker @snap-cn/phone-frame @snap-cn/laptop-frame @snap-cn/terminal-simulator @snap-cn/pulsing-border @snap-cn/follower-rush @snap-cn/prompt-zoom @snap-cn/orbit-gallery @snap-cn/hero-launch @snap-cn/moodboard-reveal @snap-cn/search-typing @snap-cn/snap-cn-ui @snap-cn/caret @snap-cn/input

4. Use it in a Remotion composition

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

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.