Skip to main content
A comprehensive currency management system that handles currency display, selection, and conversion. Supports 180+ currencies with live exchange rates, smart caching, and locale-aware formatting.

​
Installation

npx shadcn@latest add https://rigidui.com/r/currency-manager.json

​
Usage

import { 
  CurrencyProvider, 
  CurrencyDisplay, 
  CurrencySelector 
} from "@/components/currency-manager"

function ShoppingCart() {
  return (
    <div className="max-w-md mx-auto space-y-4 p-4">
      <div className="flex items-center justify-between border-b pb-3">
        <h3 className="font-semibold">Cart Total</h3>
        <CurrencySelector />
      </div>

      <div className="space-y-2">
        <div className="flex justify-between text-sm">
          <span>Laptop</span>
          <CurrencyDisplay value={1999} />
        </div>
        <div className="flex justify-between text-sm">
          <span>Keyboard</span>
          <CurrencyDisplay value={79} />
        </div>
      </div>

      <div className="border-t pt-3">
        <div className="flex justify-between items-center">
          <span className="font-bold">Total:</span>
          <CurrencyDisplay
            value={2078}
            className="text-lg font-bold text-green-600"
          />
        </div>
      </div>
    </div>
  )
}

const fetchRates = async () => {
  const response = await fetch('https://api.exchangerate.com/latest/USD')
  const data = await response.json()
  return data.rates
}

export default function App() {
  return (
    <CurrencyProvider
      fixedBaseCurrencyCode="USD"
      fetchRatesFunction={fetchRates}
      defaultSelectedCurrencyCode="EUR"
      refetchIntervalMs={900000}
    >
      <ShoppingCart />
    </CurrencyProvider>
  )
}

​
Features

Real-time Conversion

Convert monetary values between 180+ currencies with live exchange rates or your custom rates.

Smart Caching

Automatically caches exchange rates and currency data for faster loading and offline resilience.

Flexible Rate Sources

Use static rates, live API data, or your custom rate fetching function with configurable refresh intervals.

Global Support

Supports 180+ currencies with proper symbols, names, and locale-aware formatting.

Production Ready

SSR-safe, TypeScript support, error handling, fallback mechanisms, and optimized performance.

Smart Refresh

Intelligent rate refreshing that only fetches when needed, respecting your specified intervals.

​
API Reference

​
CurrencyProvider

​
children
ReactNode
required
The content to wrap with the currency provider
​
fixedBaseCurrencyCode
string
required
The currency code (e.g., “USD”) against which all provided exchange rates are relative. This is required.
​
initialRates
Record<string, number>
default:"{}"
An initial object of exchange rates, relative to fixedBaseCurrencyCode. Example: { "EUR": 0.92, "INR": 83.5 } if fixedBaseCurrencyCode is “USD”.
​
fetchRatesFunction
() => Promise<Record<string, number>>
A user-provided async function that returns a promise resolving to an object of exchange rates, relative to fixedBaseCurrencyCode. The returned object should have currency codes as keys (e.g., “EUR”, “INR”) and positive numbers as values representing conversion rates.
​
refetchIntervalMs
number
Interval in milliseconds to call fetchRatesFunction. Requires fetchRatesFunction to be set. Minimum recommended value is 60000 (1 minute).
​
defaultSelectedCurrencyCode
string
default:"'INR'"
The currency code to be selected by default. The component will try to find this code in the fetched list of available currencies.
​
loaderComponent
ComponentType
A custom component to display while loading data (e.g., currency names or exchange rates).

​
CurrencySelector

​
className
string
Additional CSS class for the selector

​
CurrencyDisplay

​
value
number
required
The monetary value to display. Should be a positive number.
​
sourceCurrency
string
The currency code of the input value. If not provided, the value is assumed to be in the fixedBaseCurrencyCode set in the CurrencyProvider.
​
className
string
Additional CSS class for the display

​
Examples

​
E-commerce Integration

import { CurrencyProvider, CurrencyDisplay } from "@/components/currency-manager"

function ProductCard({ product }) {
  return (
    <div className="border rounded-lg p-4">
      <h3>{product.name}</h3>
      <CurrencyDisplay 
        value={product.price} 
        className="text-xl font-bold"
      />
      <button>Add to Cart</button>
    </div>
  )
}

​
Multi-Currency Dashboard

import { CurrencyDisplay, CurrencySelector } from "@/components/currency-manager"

function Dashboard() {
  return (
    <div>
      <div className="flex justify-between items-center mb-4">
        <h1>Revenue Dashboard</h1>
        <CurrencySelector />
      </div>
      
      <div className="grid grid-cols-3 gap-4">
        <div className="stat-card">
          <p>Today</p>
          <CurrencyDisplay value={5420} className="text-2xl" />
        </div>
        <div className="stat-card">
          <p>This Week</p>
          <CurrencyDisplay value={38590} className="text-2xl" />
        </div>
        <div className="stat-card">
          <p>This Month</p>
          <CurrencyDisplay value={152340} className="text-2xl" />
        </div>
      </div>
    </div>
  )
}
The component automatically handles caching and persistence of exchange rates and user’s selected currency in localStorage for better performance and user experience.

Build docs developers (and LLMs) love

Get started for freeTalk to us