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 has been translated from the official Framer blog to help Korean users who face challenges due to a lack of Korean resources. It includes practical information for users. We hope it provides some assistance to those using Framer.
Setting Up the Project
First, you need a basic project structure. Create a toggle with two states (Off and On), and use overrides to connect them so that the price and state update together. Select 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. You'll first need a store to track specific values. In this example, it’s a boolean value called yearly. When a price card is toggled, this value updates, which in turn correctly changes the state and price of all the cards.
Next, create an override called withToggle. This override takes a component from the canvas and returns a React component with updated props. Here, you'll initially return the props received from Framer unchanged. In this state, it doesn’t yet perform any actions.
Updating Variants
For the override to function, you need to set the Variant based on the current value stored, and use an onClick handler to toggle the store's value when the component is clicked. This ensures that the correct Variant applies and transitions smoothly.
You can also update other properties like text. For instance, you can set it to change from a monthly price to an annual price when the component is clicked.
Completing the Synced Pricing Cards
By using these two methods, you can create a pricing card that animates between two numbers. Set each number as a property on the canvas, and you'll see a smooth transition effect when toggled.
If desired, it’s also possible to integrate an API to fetch localized prices while still taking advantage of the animation strength within Framer components.
Conclusion
Framer's Override is a powerful feature that allows you to control and modify components at runtime. In this article, we explored how to synchronize the price and state of all cards by toggling one card. Exploring and experimenting with your project will help you understand it much better.
This article is an adapted translation of Framer's official blog post ‘How to build synced pricing cards using overrides in Framer’.
