Getting Started

This is the complete path from a component on your Framer canvas to the same component running in a Next.js application. You do not need to read the other documentation pages before following this guide. They cover deeper details for the parts of the workflow you may want to customize later.

What you will do

1. Install the Reframe plugin in Framer.
2. Select and publish a component.
3. Copy the private export ID or CLI command.
4. Prepare your Next.js project.
5. Install the export with the Reframe CLI.
6. Import and render the component.
7. Republish and update it when the Framer source changes.

Before you begin

You need:

• A Framer project containing the component you want to export.
• A Next.js project with a package.json. An App Router project works well, and the same generated component can be used in other React applications.
• Node.js 22 or newer.
• A Reframe account. New accounts start on the Free plan with three lifetime exports and no card required.

If you do not have a Next.js project yet, create one first:

npx create-next-app@latest my-site
cd my-site

If you already have a Next.js project, run the Reframe commands from the directory that contains its package.json.

1. Install the Reframe plugin in Framer

Install Reframe from the Framer plugin page, then open it from your Framer project. Keep the Framer project open while you publish the component because Reframe uses the current project and selection.

In the plugin:

1. Open the component you want to move to React.
2. Select the component on the Framer canvas.
3. Open Reframe and sign in when prompted.
4. Confirm that the selected component is the one you want to export.

The plugin reads the selected component and prepares a generated React module. It does not change your Framer component or publish your website.

2. Publish the component

With the component selected, choose Publish component in Reframe. The first successful publish creates a private export associated with your Reframe account and the current Framer project.

When publishing finishes, the plugin shows:

• The component name and published version.
• A private export ID, usually beginning with rf_.
• A CLI command for installing the export in your project.

Copy the command from the plugin when possible. It contains the exact export ID you need. A command looks like this:

pnpx @reframejs/cli add rf_abc123

An export ID is private and account-scoped. The component name is not a substitute for the ID, and another Reframe account cannot use your private export.

If publishing fails, fix the issue shown by the plugin before continuing. A failed publish does not create a usable export or consume an export allowance.

3. Prepare the Next.js project

From the root of your Next.js project, initialize Reframe once:

pnpx @reframejs/cli init

The CLI looks at your existing folders and suggests where managed files should live. For a common Next.js project using src/app, choosing src/components creates:

src/components/framer/
  components/
  assets/
  meta/
  styles/

You can choose another location. For example:

pnpx @reframejs/cli init --path src/ui

Reframe writes .reframe.json next to your package.json. It stores the managed directory as a relative path, so the project remains portable when it is moved or cloned. Running init again is safe.

4. Sign in to the CLI

The plugin and CLI use the same Reframe account. Sign in once on the machine where you will install the component:

pnpx @reframejs/cli login

The command opens a browser authorization page. Finish sign-in there, then return to the terminal. If the browser does not open, the CLI prints a URL and a short code that you can open manually.

Confirm which account is active:

pnpx @reframejs/cli status

You should see output similar to:

Authenticated as you@example.com

The CLI credential is stored in your user-level Reframe configuration. Do not copy it into source control, environment files committed to a repository, or frontend code.

5. Install the published export

Run the command copied from the plugin in the root of your Next.js project:

pnpx @reframejs/cli add rf_abc123

The CLI downloads the export available to your account and writes the generated component into the framer directory. It also copies the assets, styles, metadata, and any generated runtime files required by the component.

The result is normally similar to:

src/components/framer/
  components/
    button.tsx
  assets/
  meta/
    reframe.json
  styles/
    button.css
  styles.css

The exact files depend on the component. TypeScript projects receive a typed .tsx facade. JavaScript projects receive a .jsx entry point. Use the public facade in your application, not the generated runtime file.

During installation, the CLI detects missing packages imported by the export and offers to install them with the package manager used by your project. For example, a component using three or gsap may add that package to your package.json. Review the package manager output if it asks you to approve a build script, then run the same command again if necessary.

6. Render the component in Next.js

Import the public component facade from a page or from an application component you own. With the example src/components layout, a page can look like this:

import Button from "../components/framer/components/button";

export default function HomePage() {
  return (
    <main>
      <h1>My site</h1>
      <Button />
    </main>
  );
}

The available props and variant names come from the component you published. For example, if the generated facade exposes a buttonText prop and a variant prop, pass them like this:

import Button from "../components/framer/components/button";

export default function HomePage() {
  return (
    <main>
      <Button buttonText="Get started" variant="Primary Button" />
    </main>
  );
}

Do not copy these prop names blindly. Open the generated .tsx facade or use your editor's TypeScript suggestions to see the controls exposed by your component. Framer properties that were not made public are not available as React props.

Start your Next.js app and check the page in the browser:

pnpm dev

At this point, the component from Framer is running as local React code in your Next.js project. Your routes, page layout, wrappers, and application styles remain yours to control.

7. Make it responsive when the export supports it

If the Framer component has breakpoint variants, Reframe also generates a .Responsive entry point. Use the breakpoint and variant values shown by the generated facade:

import Button from "../components/framer/components/button";

export default function HomePage() {
  return (
    <Button.Responsive
      variants={{
        base: "Primary Button",
        md: "Secondary Button",
      }}
      buttonText="Get started"
    />
  );
}

Do not add .Responsive just because a component has ordinary variants. It is for variants connected to Framer breakpoints. The generated facade is the source of truth for the supported keys and values.

8. Update the component later

When you change the source component in Framer:

1. Open Reframe in the same Framer project.
2. Select the component that already has a Reframe export.
3. Choose Update component and wait for the publish to finish.
4. Run the same add command in your Next.js project.

For example:

pnpx @reframejs/cli add rf_abc123

The CLI compares the published version and checksum with the local registry. If the export changed, it shows the old and new versions and asks for confirmation. In CI or a script, pass --yes:

pnpx @reframejs/cli add rf_abc123 --yes

Only files owned by that export are updated. Keep your page code, wrappers, application CSS, and route-specific logic outside the managed framer directory so an update cannot replace them.

What Reframe manages

Reframe manages the files inside the framer directory created during initialization. It does not overwrite your routes, pages, application components, or unrelated styles. Generated metadata records the export ID, version, and checksums so updates can be applied safely.

If something does not work

The plugin cannot publish

Make sure a component is selected, you are signed in, and the plugin is open in the Framer project that contains the component. If your account is using a project-limited plan, publish from the linked Framer project. The plugin will show the reason when an export is blocked.

The CLI says the export is not found

Copy the complete export ID from the plugin. It usually starts with rf_ and is different from the component's display name. Also check that the CLI is signed in to the same Reframe account that published the component:

pnpx @reframejs/cli status

The component has no visible size

Canvas, WebGL, and other graphics exports need a real layout box in the application. Give the component usable dimensions through a wrapper or the props exposed by its facade:

import InteractiveScene from "../components/framer/components/interactive-scene";

export default function ScenePage() {
  return (
    <InteractiveScene style={{ width: "100%", height: 420 }} />
  );
}

A package install is blocked

Read the package manager output. If it asks you to approve a native build script, follow that prompt and rerun the same add command. You can also install the reported package yourself from the project root and rerun add.

Go deeper

Once the first component is running, use these reference pages when you need more detail: