Jan 11, 2026
What Are Framer Components?
Framer components are reusable design elements that you create once and use across your entire website. Think of them as building blocks — a navigation bar, a button style, a testimonial card, a pricing table — that you design once and then place wherever you need them.
The power of components is that they're linked. When you update the source component, every instance across your site updates automatically. Change the color of your primary button component, and every button on every page reflects that change instantly. This is the foundation of building a design system — a structured, consistent approach to web design that scales.
In 2026, Framer has expanded its component system significantly, adding CMS-aware components, improved variants, and better code component support. Whether you're building a simple portfolio or a complex multi-page site, understanding components is what separates amateur Framer sites from professional ones.
Types of Components in Framer
Basic Components
Basic components are the simplest type — any group of layers that you convert into a reusable element. A card layout with an image, title, and description. A footer with links and social icons. A section header with a title and subtitle. Select the layers, right-click, and choose "Create Component."
Basic components are ideal for elements that appear in the same form across multiple pages but might need occasional updates to their design or content.
Components With Variants
Variants let a single component have multiple states or styles. A button component might have variants for primary, secondary, and ghost styles. A card component might have variants for horizontal and vertical layouts. A navigation component might have variants for desktop and mobile.
Variants keep related designs grouped together under one component, which makes your project cleaner and easier to maintain. Instead of creating separate components for "Primary Button," "Secondary Button," and "Outline Button," you create one Button component with three variants.
Interactive Components
Interactive components combine variants with transitions to create elements that respond to user input. A button that changes color on hover. A dropdown menu that expands on click. A tab interface that switches content. An accordion that opens and closes.
You define the different states as variants and then set up interactions — hover, click, or scroll triggers that transition between those variants. Framer handles the animation between states automatically, and you can customize the timing, easing, and duration. For more on animations, our complete animation guide covers everything from basic transitions to complex scroll-driven effects.
Code Components
Code components are React components written in TypeScript that run inside Framer. They're for functionality that can't be achieved with visual design alone — interactive charts, custom form logic, dynamic data fetching, map integrations, third-party widget embeddings, and more.
Code components are written in Framer's built-in code editor and can accept property controls that appear in the design panel, letting non-developers configure them visually. This makes code components powerful for teams where developers build the components and designers use them.
Creating Your First Component
Let's walk through creating a practical component from scratch — a feature card that you might use in a features section on your homepage.
Step 1: Design the element. Create a frame with your desired dimensions. Add an icon or image at the top, a heading below it, and a short description paragraph underneath. Style everything — padding, colors, typography, border radius, shadows — until it looks exactly how you want.
Step 2: Convert to component. Select the frame and all its contents, then right-click and choose "Create Component" (or use the keyboard shortcut). Framer moves the element to the Components panel and replaces the original with a linked instance.
Step 3: Make content editable. This is crucial. By default, text and images inside a component instance can be overridden — meaning you can change the text on each instance without affecting the source component. This lets you reuse the same card design with different content on each one.
Step 4: Use it. Drag your new component from the Components panel onto any page. Duplicate it as many times as you need. Change the text and images on each instance to show different features. The layout, spacing, and styling remain consistent across all instances.
Working With Component Properties (Variables)
Component properties (also called variables) give you fine-grained control over what can be customized on each instance of a component. Instead of relying only on text and image overrides, you can define explicit properties that appear in the design panel.
For example, a Button component might have these properties: Label (text — the button text), Style (enum — primary, secondary, or ghost), Size (enum — small, medium, or large), Icon (boolean — show or hide an icon), Link (link — where the button navigates).
When someone places this Button component on a page, they see these properties in the right panel and can configure each instance without opening the component source. This is what makes components feel like a polished design system rather than just copied elements.
To add properties, open the component source by double-clicking an instance, then use the properties panel on the right to define variables. You can connect these variables to any layer property inside the component — visibility, text content, color, variant, and more.
Building a Component Library
A component library is a structured collection of reusable components that covers all the common elements your site needs. Building one upfront saves enormous time as your site grows.
A solid library for a typical website includes these categories:
Primitives: Buttons, input fields, badges, tags, dividers, and icons. These are the smallest building blocks that appear inside larger components.
Navigation: Header/navbar, mobile menu, footer, breadcrumbs, and pagination. These appear on every page and benefit the most from component consistency.
Content blocks: Hero sections, feature cards, testimonial cards, pricing tables, FAQ accordions, CTA sections, and team member cards. These are the sections you'll mix and match across pages.
Layout helpers: Section wrappers with consistent max-width and padding, grid containers, and spacing elements. These ensure every page follows the same spatial rhythm.
Start with the components you need right now and expand the library as you build. Don't try to design 50 components before building a single page — let the library grow organically based on actual needs.
Naming and Organizing Components
Good organization becomes critical as your component library grows. Framer lets you organize components using a folder structure with slash-separated naming.
Name your components with a category/name pattern. For example: Buttons/Primary, Buttons/Secondary, Cards/Feature, Cards/Testimonial, Navigation/Header, Navigation/Footer. This creates folders in the Components panel that keep everything organized and findable.
A few naming conventions that help: Use descriptive names that anyone on your team would understand — "CTA Section" is better than "Section 3." Be consistent with casing — pick either Title Case or camelCase and stick with it. Prefix variants clearly — if a component has size variants, label them "Small," "Medium," "Large" rather than "S," "M," "L" for clarity.
Design Systems: The Bigger Picture
A design system goes beyond a component library. It's a complete set of standards, principles, and reusable elements that define how your website looks and behaves. In Framer, a design system consists of three layers.
Design tokens: These are your foundational values — colors, typography, spacing scales, border radii, and shadows. In Framer, you define these as color styles and text styles that your components reference. When you change a color style, every component using that style updates globally.
Components: Your reusable building blocks, built on top of your design tokens. A button component uses your color styles for its background and text, your text styles for its typography, and your spacing values for its padding.
Patterns: How components combine to create page sections and layouts. A "Hero Pattern" might specify that a hero section always uses an H1 heading, a paragraph, and a primary button — assembled from your component library in a consistent arrangement.
The benefit of thinking in systems is scalability and consistency. When a client asks to change the brand's primary color, you update one color style and the entire site transforms. When you need a new page, you assemble it from existing components and patterns in minutes rather than designing from scratch.
Responsive Components and Breakpoints
Every component you build needs to work across desktop, tablet, and mobile screen sizes. Framer handles responsiveness through breakpoints — you can define different layouts, sizes, and visibility for each screen size.
When building responsive components, design for desktop first, then adjust for smaller breakpoints. Common responsive adjustments include switching a horizontal card layout to vertical on mobile, hiding decorative elements on smaller screens, adjusting font sizes and padding, and changing grid columns from three to two to one.
Framer's auto-layout (stack and grid) features handle most responsive behavior automatically. A row of three cards in a flex container will naturally wrap to a vertical stack on narrower screens if you set the layout to wrap. Use fixed breakpoint overrides only when automatic behavior doesn't produce the result you want.
For more on building responsive layouts, our guide on building landing pages in Framer covers responsive design patterns in the context of conversion-focused pages.
Components and CMS Integration
One of the most powerful uses of components is connecting them to CMS content. When you place a component inside a CMS collection list, you can bind its properties to CMS fields — the component automatically populates with data from each collection item.
For example, a Blog Card component with properties for title, excerpt, date, and featured image can be placed in a CMS list connected to your Blog collection. Each card automatically displays the content from a different blog post. Update the card's design once, and every blog listing across your site updates.
Framer's 2026 update to CMS Components (released February 2026) expanded this functionality further, making it easier to create dynamic, data-driven layouts without code. Our CMS guide covers the full setup process.
Code Components: When and How
Not everything can be built visually. Code components fill the gap for functionality that requires custom logic — things like interactive calculators, dynamic filtering, real-time data displays, custom animations beyond what the visual editor offers, and third-party API integrations.
Code components in Framer are React components written in TypeScript. You write them in Framer's built-in code editor, and they appear in your Components panel alongside visual components. The key feature that makes code components team-friendly is property controls — UI elements that appear in the design panel so non-developers can configure the component's behavior.
For instance, a developer might build a countdown timer code component with property controls for the target date, display format, and colors. A designer can then drag the countdown component onto any page and configure it visually — no code required on their end.
Use code components when visual tools can't achieve what you need, but don't default to code when a visual solution exists. Visual components are easier to maintain, easier for team members to modify, and less prone to breaking during updates.
Sharing and Reusing Components Across Projects
Framer allows you to copy components between projects by simply copying and pasting. When you paste a component into a new project, it arrives as a new source component with all its variants, properties, and styling intact.
For teams and agencies building multiple sites, this means you can develop a master component library in one Framer project and copy components into client projects as needed. Some teams maintain a dedicated "Design System" project that serves as the single source of truth for all their components.
The trade-off is that copied components aren't linked across projects — updating the component in one project doesn't update it in others. For organizations that need true cross-project component syncing, Framer's Enterprise plan offers more advanced sharing capabilities.
Getting Started With Your Design System
Building a design system sounds like a big undertaking, but it doesn't have to be. Start small with these steps:
Define your design tokens first. Set up your color styles (primary, secondary, neutral, success, error) and text styles (H1 through H6, body, caption, button text) before building any components. This ensures everything you build references shared styles from the start.
Build components as you need them. Don't design a full library upfront. Build your first page, and when you find yourself designing something you'll reuse — a card, a section layout, a button — convert it into a component right then.
Refactor as patterns emerge. After building a few pages, you'll notice repeated patterns. That's when you go back and consolidate — turn repeated section layouts into components, extract common property patterns into variants, and organize your growing library.
The goal isn't perfection from day one — it's building a system that makes every subsequent page faster and more consistent than the last. Start with what you need today, and your design system will grow naturally into something powerful.
