Framer code override vs code component: which to use when

One of the most common questions we hear from Framer designers learning to use code: should I write this as a code override or a code component? The two get confused all the time, and the answer matters — picking wrong means rebuilding later.

Here's the practical distinction, with examples of each.

The one-line rule

Overrides modify existing frames. Components add new elements.

If you already have a design on the canvas and you want to give it new behavior, use an override. If you want to add something to the canvas that doesn't exist yet — a custom UI element with its own design — use a component.

What an override looks like

import type { ComponentType } from "react"
import { useState } from "react"

export function withClickCounter(Component): ComponentType {
  return (props) => {
    const [count, setCount] = useState(0)
    return (
      <Component
        {...props}
        onClick={() => setCount(count + 1)}
        text={`Clicked ${count} times`}
      />
    )
  }
}

The override wraps a Component Framer hands you (the frame the user applies the override to) and decorates it with extra behavior. The visual design — the button shape, color, padding — still lives in Framer's design file. The override just adds the click handler and dynamic text.

You apply overrides from the Code Overrides panel on the right sidebar. Framer auto-detects functions whose name starts with with and surfaces them in the panel.

What a component looks like

import { addPropertyControls, ControlType } from "framer"
import type { ReactNode } from "react"

export function FancyCallout({ title, body, tone }: {
  title: string
  body: ReactNode
  tone: "info" | "warning"
}) {
  const color = tone === "warning" ? "#ff8a3d" : "#1a4fa0"
  return (
    <div style={{ border: `1px solid ${color}`, padding: 16 }}>
      <h4 style={{ color }}>{title}</h4>
      <p>{body}</p>
    </div>
  )
}

addPropertyControls(FancyCallout, {
  title: { type: ControlType.String, defaultValue: "Heads up" },
  body: { type: ControlType.String, defaultValue: "Hello world" },
  tone: { type: ControlType.Enum, options: ["info", "warning"], defaultValue: "info" },
})

The component defines its own visual structure — the div, the heading, the paragraph, the colors. Framer doesn't supply a frame to wrap; the component IS the frame. Designers drag it from the Code Components panel onto the canvas and configure it through prop controls in the right sidebar.

The addPropertyControls call is what turns the component's props into editable fields in Framer's UI. Without it, the component renders but designers can't tweak it without touching the code.

Side-by-side: when to use which

| You want to... | Use | |---|---| | Add a cursor-magnetic effect to a button you already designed | Override | | Add a marquee row of logos that doesn't exist on the canvas yet | Component | | Fade a hero section on scroll | Override | | Add a Cmd-K command palette as a new UI element | Component | | Validate a form built from native Framer inputs | Override | | Add a custom code block with syntax highlighting | Component |

The pattern: overrides decorate, components contribute. If the element exists, decorate it (override). If the element doesn't exist yet, contribute it (component).

Hybrid pattern: components that take render props

There's a third pattern that's worth knowing: a code component that accepts children as a prop, lets the designer drag any Framer frame into the component as the child. The Marquee Row component above does this — designer drops their own logo frames into the marquee, the component handles the looping behavior.

This is the "best of both worlds" pattern when you want custom behavior wrapped around designer-controlled content. Use it when the wrapper is the novel part (the marquee, the carousel, the tabbed container) and the content is generic.

How to actually install each

The install flow is different for overrides vs components:

• How to use a Framer code override — Code Overrides panel, file selection, applying to a frame.
• How to use a Framer code component — Code Components panel, drag-and-drop, prop controls.

Read both if you're new — they're short.

Deeper dives on each

If you want a focused primer on just one of them, both have their own standalone explainer:

• What is a Framer code override? — the overrides-only deep dive
• What is a Framer code component? — the components-only deep dive

Once you've made the call

When you've decided which pattern fits — override or component — writing the code is the next step. The Override Forge is purpose-built for overrides: describe the behavior you want, get the override code in seconds, ready to paste into Framer using the install guide.

Component generation is a separate workflow we're shipping next (the marketplace already has hand-crafted components ready to drop in). Until Component Forge lands, the patterns above are the starting point — or pick up a production-ready one from the marketplace.