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

@snapcn 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 @snapcn/answer-highlight @snapcn/agent-steps @snapcn/announce-title @snapcn/answer-stream @snapcn/text-reveal @snapcn/text-highlight @snapcn/text-rewrite @snapcn/text-select @snapcn/text-swap @snapcn/text-swell @snapcn/text-build @snapcn/word-flip @snapcn/word-captions @snapcn/karaoke-captions @snapcn/logo-drift @snapcn/logo-assemble @snapcn/logo-flicker @snapcn/block-wordmark @snapcn/phone-frame @snapcn/laptop-frame @snapcn/terminal-simulator @snapcn/screen-recording @snapcn/count-grid @snapcn/roster-grant @snapcn/wordmark-cut @snapcn/cursor-track @snapcn/pulsing-border @snapcn/follower-rush @snapcn/prompt-send @snapcn/prompt-zoom @snapcn/punch-lines @snapcn/orbit-gallery @snapcn/hero-launch @snapcn/moodboard-reveal @snapcn/reel-collage @snapcn/search-typing @snapcn/status-cycle @snapcn/type-morph @snapcn/orb-swarm @snapcn/word-gather @snapcn/word-wheel @snapcn/channel-thread @snapcn/logo-collapse @snapcn/card-rail @snapcn/snap-cn-ui @snapcn/caret @snapcn/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.