This framer components tutorial starts with the single most powerful feature in Framer for building consistent, maintainable sites: components. A component is a reusable design element: create it once, use it across every page, and update every instance by editing the master. For anyone building a site with more than a few pages, components are not optional. They are the difference between a site that scales and one that becomes unmanageable.
We build Framer templates for a living, and every template we release is built almost entirely from components. Buttons, cards, navigation items, and footer blocks all live as component masters. When a client wants to change a button color, we update one master and every button on the site updates instantly. This guide explains how Framer components work, how to create them, and when to use design components versus code components.
If you are already working with Framer's CMS, our Framer CMS tutorial shows how components work with dynamic content.
What are Framer components and why do they matter?
In this framer components tutorial, a Framer component is a packaged group of elements that behaves as a single unit. It can contain text, images, shapes, and effects. Once you create a component, you can place multiple instances of it across your site. Change the master component, and every instance updates.
This matters for three reasons. Consistency: every button looks the same because every button is the same component. Efficiency: you do not rebuild elements from scratch for each page. Maintainability: a global update takes seconds instead of hours.
Framer offers two types of components: design components and code components. Design components are built visually in the Framer editor. Code components are written in React and imported into Framer. Most sites use design components for 95 percent of their interface.
How do you create a design component in Framer?
To start this framer components tutorial, select the elements you want to package. This could be a button with an icon and text, a testimonial card with a photo and quote, or a navigation item with a label and hover state. Right-click and choose Create Component. Framer converts the selection into a master component.
Name your component descriptively. "Primary Button" is better than "Component 1." Good naming becomes essential when you have dozens of components. We use a naming convention like [Category][Element][Variant], so "Button_Primary_Large" or "Card_Testimonial_Dark."
Once the master exists, you can drag instances from the components panel onto any page. Each instance is linked to the master. Edit the master, and all instances update. Override specific properties on an instance, like text or images, and those properties stay unique while the rest follow the master.
How do component variants work in Framer?
Variants are different states of the same component. A button might have default, hover, and pressed variants. A card might have light and dark variants. Instead of creating separate components, you create one component with multiple variants.
In Framer, open the component master and add variants from the properties panel. Each variant is a copy of the base design that you can modify independently. Switch between variants using the dropdown in the editor.
Use variants for states that share structure but differ in appearance. A navigation link with a hover state is a perfect variant use case. A completely different card layout is not; that should be a separate component.
Keep variant counts reasonable. A button with default, hover, and pressed variants is clean. A button with twelve color and size combinations becomes unwieldy. If your component needs more than four variants, consider whether you need separate component masters instead. The goal is reusability, not stuffing every possible variation into a single container.
For interactive components, connect variants with overrides. Set a hover override to switch from the default variant to the hover variant when a visitor's cursor enters the element. Framer handles the transition animation automatically. For more on Framer's animation system, see our Framer animations tutorial.
What are code components and when do you need them?
Code components are React components written in code and imported into Framer. They unlock behavior that design components cannot handle: complex logic, API calls, custom animations, and third-party library integration.
You need a code component when your element requires logic. A real-time cryptocurrency price ticker, a dynamic search filter, or a custom chart from a library like D3 all require code components. You also need them for elements that interact with external APIs.
To create a code component, write a React component in a .tsx or .jsx file. Export it as a default export, and import it into Framer using the code component panel. Framer renders the component in your layout and passes layout props automatically. For the technical details, see the Framer documentation.
Code components can be styled with Framer's design tools once imported. You can set dimensions, position, and effects from the visual editor while the logic lives in code. This hybrid approach is powerful: designers control the look, developers control the behavior.
How do you decide between design components and code components?
For most sites, design components are the right choice. They are faster to build, easier to edit, and maintainable by anyone on the team. Use design components for buttons, cards, navigation, footers, and any element that does not need custom logic.
Use code components for the exceptions: elements that need JavaScript logic, API integration, or complex state management. A good rule is to start with a design component and only upgrade to a code component when you hit a limitation.
Our Framer custom code guide covers the code insertion points that work alongside components. For a full template built with reusable components, browse our template collection or our SaaS templates to see component systems in action. If you are customizing an existing template, our how to customize a Framer template guide has practical steps. For domain setup, see our Framer custom domain setup guide.
Frequently asked questions
Can I nest components inside other components in Framer?
Yes. Framer supports nested components. A card component can contain a button component, and a section component can contain multiple card components. This is how you build complex layouts from simple, reusable parts. Changes to the nested button master update every button, even inside cards.
Do Framer components work with CMS content?
Yes. You can connect component instances to CMS fields, and Framer will populate the component with dynamic content for each entry. This is how you build a blog post card component that displays different titles, images, and excerpts for each post. Our Framer CMS tutorial has a full walkthrough.
Can I share Framer components between projects?
Framer's component library lets you save components and reuse them across projects in the same workspace. For sharing between different workspaces or with other designers, you can publish components to Framer's community library or export them as code. This makes design systems practical: build once, share everywhere.
Build your component library one reusable block at a time
Components are the foundation of professional Framer work. Start small: turn your most-used button into a component. Then your cards. Then your navigation. Within a few hours, you will have a reusable library that makes every future page faster to build and easier to update.
The best Framer sites are not collections of unique pages. They are systems of reusable components arranged differently for each page. That is the mindset that separates a polished site from a patched-together one.
Browse our Framer templates to see component-based design in practice, or read our Framer CMS tutorial to connect components with dynamic content. Build once, reuse everywhere.
