⚠️ Overrides only render in the preview (you can’t see the results on the canvas).

Creation

Your project can keep multiple separate files with overrides so that you can organize them however you like, or quickly move them around to different projects.

Framer needs to recognize your overrides from the code and does so with the TypeScript type system. Therefore you have to decorate your (exported) functions as ComponentType.

import type { ComponentType } from "react” 

export function withLink(Component): ComponentType { ... }

You can name your override any way you like, but by convention we like to prefix the name with like withTapAnimation, withBlueColor or withCurrentTime.

Components are Motion enabled elements (like motion.div) so they support everything Motion can do out of the box. Great for quick animations and effects.

Link Override

Overrides can also change the structure. Here we wrap the component inside of a link element.

export function withLink(Component): ComponentType { 
  return (props) => { 
    return ( 
      <a href="<http://koenbok.com>"> <Component {...props} /> </a> 
    ) 
  } 
}

Gotchas

Overrides can’t have props so sometimes you have to make a new override for every override that has a unique value (like a url). We’re looking to improve this in the future.