Framer Components are reusable, interactive building blocks you can drop directly onto your Framer canvas - just like native elements, but with superpowers. There are two types: Code Components and Code Overrides.

Code Components are custom React components you write in TypeScript. They appear in your asset panel, support Property Controls (the right-hand panel sliders, toggles, and color pickers), and can do things native Framer elements simply cannot; like fetching live data, running WebGL shaders, or building fully custom scroll behaviors.

Code Overrides are higher-order components that wrap existing canvas elements. You attach them to any layer on your canvas and they modify its behavior; adding hover animations, scroll triggers, shared state, or analytics events; without replacing the element itself.

How to use a Code Component:
Drop it from the Assets panel onto your canvas like any other element. Resize and position it as needed. Open the right-hand panel to see its Property Controls and customize colors, sizes, animation speeds, and more. What you configure in the panel is passed directly as React props to the component.

How to use a Code Override:
Select any layer on the canvas, open the right-hand panel, click the "Code overrides", and choose your override from the dropdown. The override wraps that layer with custom logic; it runs only in Preview and Live, not on the static canvas.

The real power comes when you combine both: a Code Component for the interactive element itself, and a Code Override to connect it to shared state or trigger animations on other layers across your page.