---
title: "MultiExchangeRates — Framer component · Best of Framer"
description: "$8.00 · Framer component · by MJ Jung · Backgrounds. Installation & Setup To add the MultiExchangeRates component to your Framer project: Navigate to the Framer Marketplace."
canonical: "https://framer.elliotli.dev/component/multiexchangerates"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/MultiExchangeRates

# MultiExchangeRates

[View on Framer](https://framer.com/marketplace/components/multiexchangerates/?via=elliot-li)

![MultiExchangeRates preview image 1](https://framer.elliotli.dev/og/component/multiexchangerates/1096a5abb9a9e7e8/1600x1200.jpg)

## Summary

Installation & Setup To add the MultiExchangeRates component to your Framer project: Navigate to the Framer Marketplace.

## Description

## 1\. Introduction

A premium Framer component for real-time multi-currency conversion, with an intuitive, visually polished interface ideal for e-commerce, finance dashboards, and more.

## 2\. Features

-   Supports multiple currencies with real-time exchange rates.
    
-   Customizable themes (light and dark) to fit your design needs.
    
-   User-friendly interface with smooth animations.
    
-   Option to show or hide currency flags and symbols.
    
-   Allows users to add or remove custom currencies.
    
-   Responsive design for mobile and desktop views.
    
-   Automatic refresh of exchange rates at defined intervals.
    

## 3\. Installation & Setup

To add the MultiExchangeRates component to your Framer project:

-   Navigate to the Framer Marketplace.
    
-   Search for "MultiExchangeRates"
    
-   Click on the component and select "Add to Project."
    
-   Drag the component from the assets panel into your design canvas.
    

## 4\. How to Use

### Customizing the Component

-   Select the MultiExchangeRates component on your canvas.
    
-   In the properties panel, you can customize various options, including:-**Theme**: Choose between 'dark' or 'light.'-**Default Base Currency**: Set the currency from which other currencies will be converted.-**Default Amount**: Specify the initial amount to display for conversion.-**Currency Display Options**: Toggle visibility for flags, currency symbols, and exchange rates.
    

### Adding Currencies

-   In the properties panel, enable the **Allow User Edit** option.
    
-   Users can click the "Add Currency" button to include additional currencies not already displayed.
    

### Adjusting Styles

-   Modify **Background Color_\*, Card Background, and \*_Accent Colors** to align with your design choices.
    
-   Utilize **Border Radius** to set the roundness of corners for all elements.
    

## 5\. Property Controls Reference

-   **theme** (Enum, default: dark): Choose between dark and light color schemes.
    
-   **defaultBaseCurrency** (Enum, default: USD): The primary currency to convert from.
    
-   **defaultAmount** (Number, default: 1): Initial amount to display for conversion.
    
-   **backgroundColor** (Color, default: -): Override theme background.
    
-   **cardBackgroundColor** (Color, default: -): Override theme card color.
    
-   **accentColor** (Color, default: #6366f1): Primary accent color for buttons and highlights.
    
-   **accentGradientEnd** (Color, default: #8b5cf6): End color for gradient effects on buttons.
    
-   **showFlags** (Boolean, default: true): Display country flag emojis for each currency.
    
-   **flagColor** (Color, default: inherit): Custom color for flag emojis.
    
-   **borderRadius** (Number, default: 24): Rounded corner size for all elements.
    
-   **showTitle** (Boolean, default: true): Display the header section with title and subtitle.
    
-   **title** (String, default: Multi Exchange Rates): Main heading text displayed at the top.
    
-   **showCurrencySymbol** (Boolean, default: true): Show currency symbols before amounts.
    
-   **showExchangeRate** (Boolean, default: true): Display the conversion rate for each currency.
    
-   **enableGlowEffect** (Boolean, default: true): Add glow effects to buttons and cards on hover.
    
-   **compactMode** (Boolean, default: false): Reduce spacing and padding for a compact layout.
    
-   **allowUserEdit** (Boolean, default: true): Let users add or remove currencies from the list.
    
-   **useRealTimeRates** (Boolean, default: true): Fetch live exchange rates from API.
    
-   **refreshInterval** (Number, default: 30): How often to update exchange rates (in minutes).
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #11201

## Details

- **Author**: MJ Jung
- **Price**: $8.00
- **Published**: 2025-12-12
- **Updated**: 2025-12-12
- **Added**: 2025-12-04
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background