Installation

Prerequisites

A React project with Editframe set up. Components use @editframe/react.

Install a free component

Browse the component gallery, then add a component through the shadcn CLI:

bunnpmpnpmyarn
Copy
$ pnpm dlx shadcn@latest add @framecn/caption-highlight

If you have not configured the registry namespace, use the full URL:

bunnpmpnpmyarn
Copy
$ pnpm dlx shadcn@latest add https://framecn.dev/r/caption-highlight.json

Import and use the copied component:

Copyimport { CaptionHighlight } from "@/components/framecn/caption-highlight";
 
export function DemoVideo() {
  return <CaptionHighlight highlightColor="#f06292" />;
}

Files are copied to components/framecn/<name>.tsx. You own the code and can customize its text, timing, colors, and layout. Each component detail page includes its preview, controls, and source.

framecn Pro

Components marked Pro, such as Node Reveal, have public previews, but source access requires signing in with an active Pro Annual, Lifetime, or Team plan. They install from the same @framecn registry, npx shadcn@latest add @framecn/<name> (for example @framecn/node-reveal), once your API key is attached to it as described in Registry.