What is a Framer code component? A designer's guide.

If you've ever wanted to add a marquee row, a command palette, or a syntax-highlighted code block to your Framer site — something the visual editor can't draw for you — chances are someone told you "you need a code component."

But what is a code component, exactly? And how is it different from designing a regular Framer frame?

The one-sentence answer

A Framer code component is a React component you build in code that designers can drag onto the Framer canvas as a first-class element, configure through prop controls in the right sidebar, and use anywhere they'd use a built-in Framer element.

Think of it as a custom UI building block — except the block doesn't exist in Framer's design panel until you write the code that defines it.

Why components exist

Framer's visual editor can draw most of what a designer needs: rectangles, text, images, buttons, simple animations. But there's a class of UI that fundamentally can't be expressed as a static frame:

• Marquee rows + carousels (infinite scrolling content that loops cleanly)
• Command palettes + search modals (keyboard-driven UI with their own state)
• Syntax-highlighted code blocks (text that needs runtime parsing + styling per language)
• Data-driven widgets (a counter that fetches a number, a feed that pulls from an API)
• Any UI with custom prop controls that designers need to tweak per-instance

For those, you need to drop down to code. Components are Framer's way of letting you ship those custom elements without losing the visual editing story — designers can still drag, resize, and configure them like any built-in.

What a component looks like

Here's a minimal one — a callout box with a title, body, and tone:

import { addPropertyControls, ControlType } from "framer"

export function Callout({ title, body, tone }: {
  title: string
  body: string
  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(Callout, {
  title: { type: ControlType.String, defaultValue: "Heads up" },
  body: { type: ControlType.String, defaultValue: "Hello world" },
  tone: { type: ControlType.Enum, options: ["info", "warning"], defaultValue: "info" },
})

Two pieces matter:

• The component function (Callout) is just a React component. It renders the UI you want. Standard React rules apply — props, state, hooks all work.
• The addPropertyControls call is the Framer-specific part. It tells Framer how to expose the component's props as editable fields in the right sidebar. Without it, the component renders but designers can't tweak it from Framer's UI.

You author components in Framer's built-in code editor (Assets → Code Components → new). Save the file, the component appears in the Code Components panel, ready to drag onto the canvas.

When not to use a component

Components are for adding new elements to the canvas — UI Framer can't represent natively. If you already have a frame on the canvas and you just want to add behavior to it (a cursor-magnetic hover, a scroll-fade effect, a click counter), that's a job for an override, not a component.

The two get confused all the time. Read our side-by-side comparison for the practical rule of thumb, or the What is a Framer code override? explainer if you want the override-side primer too.

Try one without writing any code

Want to see a component work on a real canvas? Grab Marquee Row from our marketplace — drop it on any page, fill it with your own logo frames, watch it loop:

Once you've dropped one + configured the prop controls, you've experienced every step of the workflow except writing the component yourself. Read How to use a Framer code component for the full install walkthrough.

Custom component generation via AI is on its way — Component Forge is a separate workflow we're shipping after Override Forge. Until it lands, the marketplace ships hand-crafted components for the most common patterns (marquee row, code block, command palette).