Design
Get Started
Aug 24, 2025
Creating Synced Price Cards Using Framer Overrides
Using Framer's Override feature, you can control and modify components at runtime. In this post, we'll show you how to apply overrides to a pricing card so that when you toggle one card, the price and status of all cards update simultaneously.
Uploaded by
Translated by
Contents
Table of Contents
This document addresses the challenges faced by local users learning Framer due to a lack of Korean resources by translating content from the official blog into Korean and adding practical information. We hope this is somewhat helpful to those of you using 프레이머.
Setting Up a Project
First, you need a basic project structure. Create a toggle with two states (Off and On), and use overrides to link these toggles so they update both price and state together. After selecting three toggles, add a new file and write a new Override.
Creating Overrides in Framer
The process of setting up an Override is as follows. First, you need a store to track specific values. In the example, it's a boolean value called yearly. Toggling one price card updates this value, and accordingly, the state and price of all price cards update correctly.
Next, write an Override called withToggle. This Override accepts components from the canvas and returns them as React components while passing updated props. Here, the props received from Framer are returned as is. In this state, no actions occur yet.
Updating Variants
For the Override to function, you'll need a onClick handler that sets the Variant based on the current value stored and toggles the store's value upon component click. This ensures the correct Variant is applied and transitions smoothly.
You can also update other properties like text. For example, you can set it so that clicking a component changes the text from monthly to yearly pricing.
Completing Synchronized Pricing Cards
By employing these two methods, you can create a pricing card that animates smoothly between two numbers. Set each number as a property on the canvas, and you'll see a smooth transition upon toggling.
If desired, you can integrate an API to fetch localized pricing. You can also take advantage of Framer's built-in animations within the component during this process.
Conclusion
Overrides in Framer are powerful features that allow you to control and modify components at runtime. In this article, we looked at how to make prices and states synchronize across an entire card when toggling one card. Opening a project and experimenting firsthand makes it much easier to understand.
This article is a translation and adaptation of Framer's official blog post, 'How to build synced pricing cards using overrides in Framer'.
