CLI workflow

The Reframe CLI installs published Framer components into an existing React project. Run the commands below from the project directory that contains your package.json.

Requirements

• Node.js 22 or newer.
• A React project with a package.json.
• A Reframe account.
• A component export ID from the Reframe Framer plugin.

The CLI works with JavaScript and TypeScript projects. It detects the project language from tsconfig.json, TypeScript source files, and package scripts.

Authenticate

Sign in once on a machine:

pnpx reframe login

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

Check the current account at any time:

pnpx reframe status

To remove the local CLI credential:

pnpx reframe logout

The CLI stores an access token in the user-level Reframe configuration directory. Never copy that token into source control or a frontend application.

Initialize a project

Initialize the project once:

pnpx reframe init

The CLI looks at the folders already present in your project and suggests a sensible parent directory. It prefers an existing src/components, components, app/components, src/ui, or ui directory. If none exists, it uses src/components when a src folder exists and components otherwise.

You can accept the suggestion or type another project-relative path. If you accept the default in a project with src/components, the managed files are created at:

src/components/framer/
  components/
  assets/
  meta/
  styles/
  styles.css

The CLI writes a small .reframe.json configuration file at the project root. It stores the selected output location as a relative path, so the project remains portable when it is moved or cloned.

To choose another parent directory without answering the prompt:

pnpx reframe init --path src/ui

This creates src/ui/framer. Re-running init is safe; it preserves the existing configuration unless you choose a different location.

Documentation links in generated comments

The published CLI is built with Reframe's current documentation URL. You do not need to set a docs URL, edit generated comments, or add a project setting. When Reframe's domain changes, a new CLI release will contain the updated link; components added with that release will point to the current documentation automatically.

Add an export

Copy the export ID shown after publishing in the Framer plugin, then run:

pnpx reframe add <component-id>

For example:

pnpx reframe add rf_abc123

The command:

1. Downloads the private export associated with your account.
2. Detects JavaScript or TypeScript.
3. Writes the component entry point, generated runtime, assets, styles, and metadata inside the managed framer directory.
4. Updates the shared framer/styles.css import file.
5. Adds the unframer runtime dependency to package.json when it is missing.

The export ID is authorization-scoped. A user cannot use the CLI to download another account's private export.

Update an installed component

Run the same command again when a published export has changed:

pnpx reframe add <component-id>

Reframe compares the published version and checksum with the local metadata. Unchanged exports are skipped. If the export changed, the CLI asks before replacing files that belong to that component. Use --yes for a non-interactive update:

pnpx reframe add <component-id> --yes

Only files owned by the selected export are updated. Keep application wrappers, routes, and custom CSS outside the managed framer directory so updates do not overwrite them.

Create a preview project

To inspect an export in an isolated app, run:

pnpx reframe create --component <component-id>

This creates a new Vite React project with the selected component as its starter content. The command installs dependencies and prints the output directory and development command.

Choose an output directory explicitly with --out:

pnpx reframe create --component <component-id> --out ./reframe-preview

Use --no-install when you want the generated project files without installing packages. Enter the output directory and install dependencies with your preferred package manager before starting the preview.

Common problems

Initialize the project before adding components

Run pnpx reframe init from the same project root where you run reframe add.

Sign in before running commands

Run pnpx reframe login, then retry the command. Use pnpx reframe status to confirm which account is active.

The component is not found

Copy the complete export ID from the plugin. An export ID usually starts with rf_; it is not the Framer component name.

The browser authorization page does not open

Copy the URL printed by the CLI and paste it into a browser. The authorization request stays active while you complete the flow.

Package installation fails

The CLI can write the component even when automatic dependency installation fails. Confirm that Node.js and your package manager are installed, then install the reported packages from the project root and run the command again.