Default sizing done right for code components

Intrinsic Sizing Done Right

Getting the sizing right is one of those small details that separates a stable component from one that jumps, collapses, or looks off when dropped on the canvas. Intrinsic sizing tells Framer what size your component should start with when it’s added to the project.

When you skip this, Framer guesses. Sometimes it’s perfect, other times your component appears microscopic or takes over the entire canvas. Setting the intrinsic width and height removes that randomness.

What intrinsic sizing actually does

Intrinsic sizing doesn’t control how your component resizes. It only defines the initial footprint when a user drops it on the canvas. You still decide how it behaves later (auto, fixed, or any) using supported layout annotations.

Think of intrinsic size as the default dimensions Framer uses before anyone touches the resize handles.

Example

// @framerSupportedLayoutWidth any-prefer-fixed
// @framerSupportedLayoutHeight fixed
// @framerIntrinsicWidth 320
// @framerIntrinsicHeight 120

export default function Card({ title = "Hello World" }) {
  return (
    <div style="{{" background:="" "#fff",="" borderradius:="" 12,="" boxshadow:="" "0="" 4px="" 12px="" rgba(0,0,0,0.08)",="" padding:="" 24,="" fontsize:="" 18,="" fontweight:="" 500,="" }}="">
      {title}
    </div>
  )
}

When this component is dropped on the canvas, it starts with a clean 320×120 frame that feels natural to design with. Designers can still resize it freely because of the any-prefer-fixed rule.

Why it matters

A clear intrinsic size makes your components feel native to Framer. They don’t spawn at random sizes or collapse into zero height. This is especially important for cards, media components, and any layout with absolute children.

If you’re building a responsive component, pair intrinsic hints with supported layout annotations to ensure it behaves consistently across the canvas, preview, and published site.

Pro tip

Pick a default size that visually matches its purpose.

A button shouldn’t start at 600px wide. A hero component shouldn’t open at 100px tall.

The goal is to make every component feel just right the moment it’s added.