Agent-readable docs index: /llms.txt. Full docs in one file: /llms-full.txt. Download /docs.zip to grep all markdown files locally.

Export your first Framer component

This guide walks you through exporting a Framer component and rendering it in a React app on your machine. The whole process takes about 5 minutes.

Prerequisites

  • A Framer project with at least one component
  • Node.js 18+ installed on your machine
If your Framer project has no components yet, select any layer in Framer, right-click, and choose Create Component.

1. Install the React Export plugin

Open your Framer project, press Cmd+K (or Ctrl+K on Windows), and search for React Export. Click install.
You can also install it directly from the Framer Marketplace.

2. Select components and export

Open the plugin. You will see a list of all components in your project. Select the ones you want to export and click Export.
The plugin saves your component URLs to the Unframer database. This is what the CLI reads in the next step.
You only need to re-open the plugin when you add new components, change color styles, add pages, or modify breakpoints. For existing component updates, just re-run the CLI.

3. Create an example app

Run the following command to scaffold a Vite + React app with your exported components:
npx unframer example-app {projectId}
Replace {projectId} with the short ID shown in the plugin after exporting. The command creates a folder called example-unframer-app with a working React app and installs dependencies automatically.
cd example-unframer-app
npm run dev
Open http://localhost:5173 in your browser. You should see your Framer components rendering as native React.

4. Use in an existing project

If you already have a React project, install unframer and download your components directly:
npm install unframer react@19 react-dom@19
npx unframer {projectId} --outDir ./src/framer
Then import the components and the base styles:
import './framer/styles.css'
import Hero from './framer/hero'

export default function App() {
    return (
        <div>
            <Hero />
        </div>
    )
}
Disable React Strict Mode. Strict mode renders components twice, which can break Framer animations. Remove <StrictMode> from your entry file if you see animation glitches.

5. Keep components in sync

After making changes in Framer, publish your site (the publish button in Framer), then re-run the CLI:
npx unframer {projectId} --outDir ./src/framer
The generated files are overwritten each time. Do not edit them manually.
You can also use --watch to automatically re-export when Framer publishes:
npx unframer {projectId} --outDir ./src/framer --watch

What's next

Powered byHolocron