MultiExchangeRates

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