exchange-rate

Currency pair display with live rate, conversion calculator, and trend indicator. Supports MXT ↔ fiat pairs across 42 African currencies. Used in Wallet swap interface and BushTrade cross-border commerce.

Source code

No interactive demo is registered for this component yet — the source is shown directly.

"use client"

import * as React from "react"
import { cn } from "@/lib/utils"

interface ExchangeRateProps extends React.ComponentProps<"div"> {
  fromCurrency: string
  toCurrency: string
  rate: number
  change24h?: number
  lastUpdated?: Date | string
}

function ExchangeRate({
  fromCurrency, toCurrency, rate, change24h, lastUpdated, loading = false, className, ...props
}: ExchangeRateProps) {
  const isPositive = change24h !== undefined && change24h >= 0

  return (
    <div
      data-slot="exchange-rate" data-portal="https://design.nyuchi.com/components/exchange-rate" role="article"
      className={cn("flex items-center justify-between rounded-[var(--radius-lg,14px)] border border-border bg-card px-4 py-3", className)}
      {...props}
    >
      <div className="flex items-center gap-2">
        <span className="text-sm font-medium">{fromCurrency}</span>
        <span className="text-muted-foreground">→</span>
        <span className="text-sm font-medium">{toCurrency}</span>
      </div>
      <div className="text-right">
        <div className="text-sm font-bold tabular-nums">{rate.toFixed(4)}</div>
        {change24h !== undefined && (
          <div className={cn(
            "text-[10px] font-medium",
            isPositive ? "text-[var(--color-malachite,#64FFDA)]" : "text-destructive"
          )}>
            {isPositive ? "+" : ""}{change24h.toFixed(2)}%
          </div>
        )}
      </div>
    </div>
  )
}

export { ExchangeRate }
export type { ExchangeRateProps }

Variants & props

The variants, sizes, and props surfaced by the registry. Each is sourced from the Supabase component_docs table.

API tester

Hit the registry API live and see the JSON the shadcn CLI consumes when it installs this component.

GET/api/v1/ui/exchange-rate

Install

npx shadcn@latest add https://mzizi.dev/api/v1/ui/exchange-rate

Dependencies

cardcurrency-input

Source code

No interactive demo is registered for this component yet — the source is shown directly.

"use client"

import * as React from "react"
import { cn } from "@/lib/utils"

interface ExchangeRateProps extends React.ComponentProps<"div"> {
  fromCurrency: string
  toCurrency: string
  rate: number
  change24h?: number
  lastUpdated?: Date | string
}

function ExchangeRate({
  fromCurrency, toCurrency, rate, change24h, lastUpdated, loading = false, className, ...props
}: ExchangeRateProps) {
  const isPositive = change24h !== undefined && change24h >= 0

  return (
    <div
      data-slot="exchange-rate" data-portal="https://design.nyuchi.com/components/exchange-rate" role="article"
      className={cn("flex items-center justify-between rounded-[var(--radius-lg,14px)] border border-border bg-card px-4 py-3", className)}
      {...props}
    >
      <div className="flex items-center gap-2">
        <span className="text-sm font-medium">{fromCurrency}</span>
        <span className="text-muted-foreground">→</span>
        <span className="text-sm font-medium">{toCurrency}</span>
      </div>
      <div className="text-right">
        <div className="text-sm font-bold tabular-nums">{rate.toFixed(4)}</div>
        {change24h !== undefined && (
          <div className={cn(
            "text-[10px] font-medium",
            isPositive ? "text-[var(--color-malachite,#64FFDA)]" : "text-destructive"
          )}>
            {isPositive ? "+" : ""}{change24h.toFixed(2)}%
          </div>
        )}
      </div>
    </div>
  )
}

export { ExchangeRate }
export type { ExchangeRateProps }