Reframe
Turn Framer components into React code.
About
Reframe: Framer Components to React
Reframe is a Framer plugin and CLI that turns components you've already designed into clean, reusable React code. Instead of rebuilding a polished UI by hand, you publish it from Framer and drop it into your codebase in a few commands.
Exported components keep their variants, interactions, and responsive behavior, and arrive as typed React files you can import and compose like anything else in your app.
The workflow
1. Publish from Framer. Select a component, open the Reframe plugin, and hit Publish component. You get a private export ID and a ready-to-paste CLI command.
2. Set up your project once.
npx @reframejs/cli init
npx @reframejs/cli logininit suggests where managed files should live, and login authorizes the CLI in your browser.
3. Add the component.
npx @reframejs/cli add rf_abc123The CLI downloads the export, writes the component, styles, assets, and metadata into a managed framer folder, and installs any missing packages it detects (like three or gsap) with your project's package manager.
4. Use it like any React component.
import Button from "../components/framer/components/button";
export default function HomePage() {
return <Button buttonText="Get started" variant="Primary Button" />;
}Public Framer properties become typed props, so your editor autocompletes them.
5. Make it responsive. Components with breakpoint variants get a .Responsive entry point:
<Button.Responsive
variants={{ base: "Primary Button", md: "Secondary Button" }}
buttonText="Get started"
/>6. Update when the design changes. Hit Update component in Framer, then re-run the same command:
npx @reframejs/cli add rf_abc123 --yesThe CLI compares versions and checksums and only touches files it owns, so your pages, wrappers, and app styles are never overwritten. The --yes flag makes it CI-friendly.
Why it's nice to work with
- Safe updates. Generated code lives in one managed directory, separate from your own code.
- Typed output. TypeScript projects get a typed facade; JavaScript projects get a
.jsxentry point. - Dependency handling. Missing packages are detected and installed automatically.
- Works in existing apps. Built for Next.js and usable in other React projects.
Built with Next.js, TypeScript, and Node.
