Overrides offer amazing ways to supercharge your site; add animations, handle state, and utilise third-party libraries.

For a long time they were heavily used to add effects in components, thankfully that is now natively supported.

Adding overrides in Framer is fairly straightforward but there are a few key things to watch out for.

What is an override?

In standard React it's known as a HOC (higher-order component); it takes an existing element and wraps it to add additional functionality — like a fancy lil' sandwich.

Adding overrides to your project

Head to the left sidebar > Assets tab > hit the + next to Code at the bottom. Or use ⌘+⇧+K. Selecting Override or Component in this dialog only changes what example code you'll be shown; no need to worry about different file types, they're both standard .tsx files.

The examples shown are a good starting point to understand the structure of overrides. Framer does trip itself up a little when it comes to nomenclature; Component can a native Framer 'symbol', it's also what we call custom code files, it's also what we wrap

Applying overrides

Applying your new override is simple. Select your element, then hit the + in Code Overrides at the bottom of the right sidebar.

Depending on how your override was built, you might experience different results when applying overrides to different elements:

• A div (a frame, some text)

• A code component

• A component instance (a component you've inserted onto your canvas)

• A variant (applying to a primary variant in the component editing screen)
  
  

The most important one to watch out for is component vs instance, especially if your override requires a unique id.

Potential gotchas

• If you add your override code to a new file and then can't see it in the drop down, it means your code is invalid. You'll have to find the file it in the assets panel to edit.

• If you have an override applied to a component and you break something in the override, every instance of that component will throw and error, preventing you from publishing.

• If you replace the example content and you still see the previous functions ('withHover' etc.) in the dropdown, this can mean that an npm package (in your import statements) in a separate code component is failing to resolve. If you wait for the error message to popup and refresh, you should be good to go. Or simply remove/fix the code component that's causing the issue.

• If you're inserting a component from someone else's project and it has an override applied, you'll see 'External' in the override dropdown, which means you won't be able to edit that code. Wherever possible I've tried to supply the overrides in plain text on framer.today.