> Agent-readable docs index: /llms.txt. Download /docs.zip to grep all markdown files locally.

---
title: Quickstart
sidebarTitle: Quickstart
description: Export your first Framer component to React in under 5 minutes.
icon: lucide:rocket
---

# 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

<Aside>
  <Tip>
    If your Framer project has no components yet, select any layer in Framer, right-click, and choose **Create Component**.
  </Tip>
</Aside>

## 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](https://framer.link/TGWRs2U).

## 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.

<Aside>
  <Note>
    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.
  </Note>
</Aside>

## 3. Create an example app

Run the following command to scaffold a **Vite + React app** with your exported components:

```bash
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.

```bash
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:

```bash
npm install unframer react@19 react-dom@19
npx unframer {projectId} --outDir ./src/framer
```

Then import the components and the base styles:

```tsx
import './framer/styles.css'
import Hero from './framer/hero'

export default function App() {
    return (
        <div>
            <Hero />
        </div>
    )
}
```

<Aside>
  <Warning>
    **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.
  </Warning>
</Aside>

## 5. Keep components in sync

After making changes in Framer, **publish your site** (the publish button in Framer), then re-run the CLI:

```bash
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:

```bash
npx unframer {projectId} --outDir ./src/framer --watch
```

## What's next

* [How it works](/how-it-works) — understand the architecture behind the export
* [Styling & dark mode](/styling) — customize sizing, colors, and dark mode
* [Export a full website](/guides/export-full-website) — end-to-end tutorial for multi-page sites
* [Connect Framer MCP](/mcp/connect) — let AI assistants read and modify your Framer project