Components are re-usable elements of a design. Framer X supports two kinds of components: components that you create on the canvas, called design components, and components that you write in code, called code components. Both design components and code components are available on the components panel.
All design components have a master component. Each of your master components live on the canvas. Removing a master component from the canvas will also remove them from the Components panel.
If you paste, duplicate or drag a component from the panel to the canvas, you’ll create an instance of that component. Any changes you make to the master will be reflected within each instance. However, you can override the properties of any instance, customizing properties like color, opacity and radius, or layout options like position and size. To remove these overrides, right-click the instance and select Reset Overrides to revert its properties back to match its master component.
While design components have the same limitations as traditional design tools, Code components are virtually limitless. Code components are React components that you may use anywhere in your project, and that can interact with other components in many ways.
Components from the Framer X Store
If you've installed a package from the Framer X store, that package may include design components, code components, or both.