Getting Started
Reframe moves a component from a Framer canvas into your React project. Select a component in Framer, publish it with the Reframe plugin, then install the published export with the CLI.
The generated runtime, variants, styles, assets, and metadata are written into your project. You can import the component like any other React module and keep your application code under your own control.
The workflow
Publish from Framer
Select a component on the Framer canvas and publish it through the Reframe plugin. The plugin returns a stable export ID.
Install with the CLI
Run this from the root of your React project:
pnpx reframe add <component-id>Reframe detects JavaScript or TypeScript automatically.
Build on the result
Import the generated component, pass its props, and keep application-specific changes in your own code and CSS.
Start here
- CLI workflow - sign in, initialize a project, publish an export ID, and add components.
- Using components - understand the generated files, imports, variants, and responsive components.
- Props and styling - pass Framer properties and customize output without editing generated runtime files.
What Reframe manages
Reframe manages only the files inside the framer directory created during initialization. Your routes, pages, application components, and unrelated styles are not overwritten. When an export changes, the CLI uses its version metadata and checksum to update the files owned by that export.