Components are like legos for your interface. They are small building blocks that you can compose into larger ones, making up entire screens, interfaces and apps.
PS: Please Lego don't sue me for this analogy.
Framer X has two types of components, which it treats the same because they ultimately are the same under the hood: React components:
Design components – components that you draw on the canvas consisting of visual and basic interaction that you can express on the canvas. Everyone can build these. Design components are fully editable on the canvas.
Any component can be displayed on the canvas, but interactive components (like scroll or something with a click) only work in the Preview. Both design and code components can be composed into any hierarchy on the canvas, design components can even contain code components, and every component has the same automatic layout options as any Frame.
A Framer X project lists all components in that specific project under the Components tab on the left. The components can origin from:
Your project canvas (design components).
Your project code (code components).
Installed packages (either types).