Components are one of the most powerful concepts in Framer — and they're used throughout your template. Understanding them unlocks the ability to make broad changes quickly and keep your design consistent.

The Core Idea

A Component is a reusable UI element with a single source of truth. You create it once (the master component), then place as many copies (instances) as you like. When you edit the master, every instance updates automatically.

Components in Your Template

Your template uses components for almost every repeated element:

• Navbar — One component, appears on every page. Edit once to update everywhere.

• Footer — Same concept as the navbar.

• Buttons — Primary, secondary, and ghost button styles.

• Cards — Blog post cards, feature cards, testimonial cards.

• Tags / Badges — Labels like "New", category tags, etc.

Recognizing Components on the Canvas

Component instances show a purple border when selected. In the Layers panel, they appear with a purple component icon. The component name is shown in the right panel under "Instance of [ComponentName]".

💡 Tip: Components can have properties — customizable values you can change per-instance (like the button label or the card image) without breaking the connection to the master. This is how the same Card component can show different content on each card in a grid.