5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T1112,

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).

5a:[["$","$L5d",null,{"post":{"id":"019b1324-c066-7ac0-8301-f65da9e82bc1","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"7UWjhw74j3dyQz58edZ3","resolved":true,"title":"MultiExchangeRates","body":"$5e","bodyJson":null,"introduction":"","slug":"multiexchangerates","author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/7UWjhw74j3dyQz58edZ3/multiexchangerates-uhDh1ppkUz9KAwfVIwUFXwCbDWiJ6A","metadata":{"tint":{"h":210,"s":22,"l":14},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-12-04T07:17:32.708Z","updatedAt":"2025-12-12T09:15:29.321Z","publishedAt":"2025-12-12T15:18:54.310Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://jubilant-month-162574.framer.app/","price":"8","paymentUrl":"https://buy.polar.sh/polar_cl_mZz4XvPybYUZR8ZmJqKBgMR6frnxmV4gTCBlq3vpObb","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"znKNlnD8AjNwLUV9fvs3","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-12-12T15:18:54.310Z","updatedAt":"2025-12-12T15:18:54.310Z","reported":false}}],"$L5f"]

Suggested for you