run framer before deploy

nextjs-app/package.json

@@ -2,10 +2,10 @@
     "name": "nextjs-app",
     "private": true,
     "scripts": {
-        "dev:ui": "concurrently-ui 'next dev  --port 5543' 'pnpm unframer'",
+        "dev:ui": "next dev  --port 5543",
         "dev": "next dev  --port 5543",
         "gen": "pnpm --filter unframer build && pnpm unframer",
-        "build": "pnpm --filter unframer build && framer-simplicity && next build",
+        "build": "pnpm --filter unframer build && pnpm framer-simplicity && next build",
         "framer-simplicity": "pnpm unframer 080b0b6d577bdc21 --outDir ./src/framer-simplicity",
         "start": "next start",
         "lint": "next lint"

unframer/README.md

@@ -2,34 +2,31 @@
     <br/>
     <br/>
     <h3>unframer</h3>
+    <p>design in Framer, deploy in React</p>
     <br/>
     <br/>
 </div>
 
-Download framer components as simple files
-
-- Works with any React framework (Next.js, Remix, Vite, etc)
+- Unframer exports your Framer components as simple .js files
+- Works with any React framework (Next.js, Remix, Vite, Astro, etc)
 - Includes all your components dependencies
-- Works with Framer locales, fetch, Framer Forms, color styles, dark mode (via `dark` class), etc
-- Has Typescript support, inferred from your component variables (like `variant`)
+- Works with breakpoints, Framer fetch, Forms, color styles, dark mode (via `dark` class), etc
+- Full Typescript support, inferred from your component variables (like `variant`)
 
 ## Usage
 
-1. Install the package
+1. Install unframer and update react to 19
 
     ```sh
-    npm install unframer
+    npm install unframer react@19 react-dom@19
     ```
 
 1. Install the [`React Export` Framer plugin](https://www.framer.com/marketplace/plugins/react-export/), open it and select which components you want to export.
 
-<div align="center">
-    <img src="./assets/select-components.jpeg" width="600" />
-</div>
-
-1. Run the command `npx unframer {projectId} --outDir ./src/framer` to download the components and their types in the `outDir` directory, the command will be shown in the Framer plugin too. Run this command each time you update your Framer project and want to update the components.
+1. Run the command `npx unframer {projectId} --outDir ./src/framer` to download the components and their types in the `outDir` directory.
+   Run this command every time you add a new Framer component.
 
-1. Import the component inside your `jsx` files together with the `styles.css` file, for example
+1. Import the components inside your `jsx` files together with `styles.css`, for example
 
 ```tsx
 import './framer/styles.css' // load base Framer styles
@@ -167,6 +164,8 @@ export default function App() {
 
 Unframer will export your color styles as CSS variables, for example:
 
+> You can use Framer CSS variables in your own code, for example in tailwind with `<div className='bg-(--unframer-white)' />`
+
 ```css
 :root {
     --unframer-chambray: rgb(72, 86, 150);
@@ -199,8 +198,6 @@ Unframer will export your color styles as CSS variables, for example:
 }
 ```
 
-> you can use them in your own code, for example in tailwind with `<div className='bg-(--unframer-white)' />`
-
 ## When should I run the plugin again?
 
 You can just run the `unframer` cli to get changes from the existing components.