How to use Framer components in Cursor

Why Cursor + Framer to AI?

Cursor is an AI-first code editor that understands your entire codebase. When you give it a Framer component export plus the AI-ready prompt from Framer to AI, Cursor can integrate the component into exactly the right place — matching your project's conventions, routing, and file structure automatically.

The workflow

1. Export from Framer. Select your component in Framer, run the Framer to AI plugin, and click Copy Prompt. A self-contained AI prompt copies to your clipboard.
2. Open Cursor and paste. Open the Composer (Cmd+I) and paste the AI prompt. Cursor saves the component files, installs dependencies, and knows exactly how to wire them up.
3. Tell Cursor what to do. Add context like “Add this hero component to the homepage” or “Replace the current navbar with this one.”

Example prompt in Cursor

After pasting the auto-generated prompt from Framer to AI, you might add:

I've added a Framer-exported hero component to components/framer/.
The AI prompt above describes the component's props and usage.

Please:
1. Import and render this component on the homepage (app/page.tsx)
2. Pass the appropriate props for the "dark" variant
3. Make sure framer-motion is in our dependencies

Tips for Cursor integration

• Use Composer, not Chat. Composer can make multi-file edits across your project. Chat is read-only.
• Reference the exported files. Mention the file paths so Cursor indexes them. For example: “Seecomponents/framer/HeroSection.tsx”.
• Ask for modifications. Once integrated, you can ask Cursor to customize the component — change colors, add click handlers, connect to your API.
• Use @file references. In Cursor, you can tag files with @filename to give the AI focused context on specific files.

What Cursor handles well

• Multi-file edits (importing + rendering in one step)
• Detecting your project's framework (Next.js, Vite, etc.)
• Setting up the project automatically
• Matching your existing code style and conventions

More example prompts

The prompt you paste from Framer to AI gives Cursor everything it needs to understand the component. The second part of your message tells Cursor what to do with it. Here are three real-world scenarios.

Landing page integration

You have a marketing landing page in Next.js and you just exported a hero section with a headline, subtext, and a CTA button from Framer.

I've added a Framer-exported hero section to components/framer/HeroLanding.tsx.
The AI prompt above describes the component structure and props.

Please:
1. Import HeroLanding into app/(marketing)/page.tsx
2. Render it as the first section below the navbar
3. Pass the "headline" prop as "Ship faster with AI"
4. Pass the "ctaHref" prop pointing to "/signup"
5. Make sure all dependencies (framer-motion, etc.) are installed

Dashboard component

You designed a stats card in Framer that shows a metric, a trend arrow, and a sparkline chart. You want it on your admin dashboard.

I've added a Framer-exported stats card to components/framer/StatsCard.tsx.
The AI prompt above describes the component's props and variants.

Please:
1. Import StatsCard into app/dashboard/page.tsx
2. Render three instances inside the existing grid layout
3. Wire each card's "value" and "trend" props to the data
   returned by the useMetrics() hook already in the file
4. Use the "compact" variant for screens below 768px

E-commerce product card

You exported a product card from Framer with an image, title, price, and an “Add to cart” button. You need it in a product grid.

I've added a Framer-exported product card to components/framer/ProductCard.tsx.
The AI prompt above describes the component's props and usage.

Please:
1. Import ProductCard into app/shop/page.tsx
2. Map over the "products" array from getProducts() and render
   a ProductCard for each item inside the existing grid
3. Pass "imageSrc", "title", "price", and "slug" props from
   each product object
4. Connect the "onAddToCart" prop to the addToCart() function
   from our CartContext

Troubleshooting

Most issues with Framer exports in Cursor fall into a few common categories. Here is how to fix each one.

Component not rendering

If the component imports without errors but nothing shows up on screen, the most likely cause is a missing framer-motion dependency. Framer components rely on framer-motion for layout, animations, and variant switching. Without it, the component either fails silently or renders an empty container.

Fix it by adding the dependency:

npm install framer-motion

Then confirm it is imported correctly in the component file. If Cursor did not add the import automatically, ask it to: “Make sure framer-motion is imported in the component file.”

Styles not applying

Framer exports include their own CSS. If the component renders but looks wrong — missing fonts, broken spacing, no colors — the CSS file is probably not being imported.

• Check that the exported .css file is imported in the component or in your root layout. Framer to AI includes the import path in the generated prompt, but Cursor may place it in the wrong file.
• If you use CSS Modules or Tailwind, make sure the global CSS import is not being stripped by your build config. Framer exports use plain CSS, not modules.
• Check for class name collisions. If your project already defines a class with the same name as one in the Framer export, your styles will override it. Namespace the Framer CSS or ask Cursor to scope the styles.

Responsive variants not switching

Framer components often include responsive variants (for example, a “desktop” and “mobile” layout). If the component stays stuck on one variant regardless of screen size, check these:

• Viewport meta tag. Make sure your <head> includes <meta name="viewport" content="width=device-width, initial-scale=1" />. Without it, mobile browsers render at desktop width.
• Variant prop not passed. Some Framer exports require you to pass the active variant as a prop. Check the AI prompt for a variant or breakpoint prop and make sure it is wired to your responsive logic — either through a media query hook or a CSS-driven approach.
• CSS media queries not loaded. If the responsive behavior is CSS-driven, confirm the exported stylesheet is imported and not being purged by your CSS tooling.

Cursor not finding the exported files

If Cursor says it cannot find the component files, the most common causes are:

• Wrong save path. The component files were saved outside your project directory, or into a folder Cursor is not indexing. Move the files into your project tree (e.g. components/framer/).
• File not indexed yet. Cursor indexes files asynchronously. If the files were just saved, wait a few seconds or switch to the file in the editor so Cursor picks it up.
• Use @file references. Explicitly reference the file path in your prompt with @components/framer/MyComponent.tsx so Cursor knows exactly where to look.
• .gitignore exclusion. If your .gitignore excludes the folder you extracted into, Cursor may skip it during indexing. Check your ignore rules.

What to do next

Once the component is integrated and rendering correctly, here are the typical next steps.

• Connect to a backend. Ask Cursor to wire the component's props to data from your API, database, or CMS. For example: “Fetch the hero headline from our Sanity CMS and pass it as a prop to HeroSection.”
• Add animations. Framer exports already include framer-motion support. Ask Cursor to add entrance animations, scroll-triggered effects, or hover states. The component is already set up for motion — you just need to define the behavior.
• Customize the component. Change colors, swap fonts, adjust spacing, or add new props. Since the exported code is plain React, you can modify it directly or ask Cursor to refactor it for you.
• Make it reusable. If the component will appear in multiple places, ask Cursor to extract hardcoded values into props and add TypeScript types for them. This turns a one-off export into a flexible component your team can use anywhere.
• Add tests. Ask Cursor to generate unit tests for the component using your existing test framework. A good starting point: “Write tests that verify the component renders each variant and responds to click handlers.”

The combination of Framer's visual design power and Cursor's codebase-aware AI makes for the fastest design-to-code workflow available. Export, paste, ship.