How to use a Framer code override (step-by-step)

You've got the code for a Framer override — maybe from our marketplace, maybe from the Forge, maybe from a tutorial. Now what?

Installing an override in Framer is a 4-step process that takes about a minute the first time and 15 seconds every time after. Here's the full walkthrough, plus the common gotchas that trip up most first-timers.

Step 1: Open the Code Overrides panel

In Framer's right sidebar, scroll down past the layer properties until you find the Code Overrides section. If it's not there, click the Customize button at the top of the sidebar and toggle Code Overrides on.

The panel is empty until you've selected a frame on the canvas. Pick the frame you want the override to apply to — a button, a section, whatever — and the panel becomes editable.

Step 2: Create the override file

Click the + icon next to Code Overrides in the panel. Framer asks for a file name — call it something descriptive like heroOverrides or buttonEffects. Multiple overrides can live in the same file, so you don't need one file per override.

Framer opens the new file in its built-in code editor with a starter template. Delete the starter and paste in your override code. The override function should start with with — Framer uses this prefix to identify overrides automatically. If your code uses a different naming convention (e.g. scrollFade instead of withScrollFade), Framer won't surface it.

import type { ComponentType } from "react"
import { useScroll, useTransform } from "framer-motion"

export function withScrollFade(Component): ComponentType {
  return (props) => {
    const { scrollY } = useScroll()
    const opacity = useTransform(scrollY, [0, 400], [1, 0])
    return <Component {...props} style={{ ...props.style, opacity }} />
  }
}

Save the file (Cmd+S / Ctrl+S). Framer compiles it in the background.

Step 3: Apply the override to a frame

Back on the canvas, with your target frame still selected, find your override in the Code Overrides panel. There are two dropdowns:

• File — pick the file you just saved (heroOverrides)
• Override — pick the function name (withScrollFade)

Framer applies it immediately. The frame on the canvas now runs through your override at render time.

Step 4: Verify it works

Switch to Preview mode (top right of Framer's canvas). The override should be live. Scroll the page, hover the element, click — whatever the override does, do that, and confirm it behaves.

If nothing happens, jump to the troubleshooting section below.

Common gotchas

"My override doesn't show up in the panel"

Three usual causes:

1. Function name doesn't start with with. Framer uses this prefix to auto-detect overrides. scrollFade won't show; withScrollFade will.
2. The function isn't exported. Override functions must use the export keyword. function withFade(...) won't surface; export function withFade(...) will.
3. The file has a TypeScript error. Framer can't compile broken files. Check the code editor for red squiggles — fix them, save, the override appears.

"The override applies but nothing happens"

• Check Preview mode. Overrides don't run on the design canvas.
• Check that you're spreading ...props. If your override returns <Component style={{ opacity: 0 }} /> instead of <Component {...props} style={{ ...props.style, opacity: 0 }} />, you've thrown away the original frame's styling. The element renders as a blank div.
• Check the browser console. Framer surfaces override errors there. Look for red Error messages — usually a typo in a framer-motion import or a hook called conditionally.

"I want to test it without paying for Pro"

You don't need Framer Pro to use overrides — they work on the free tier. You do need Pro to publish a site that uses them, but local Preview mode is free.

Try one now

The fastest way to learn the install flow is to actually do it. Grab this free override, paste it into a Framer file, apply it to your hero frame:

5 minutes start-to-finish, including the file creation. Now you know the flow.

Need to write your own?

Once you've installed one, the next question is usually: "how do I write a custom one for my design?" Two answers:

• Code override vs code component — decide which pattern fits your use case.
• The Forge — describe the effect you want in plain English; get the override code in seconds, ready to paste into Framer using the steps above.