Skip to content
  • No data uploaded
  • Instant results
UI Component Generator

Bootstrap 5 Currency Pricing Table for React

A production-ready minimal currency pricing table: a dynamic pricing section that detects the visitor’s currency, shows purchasing-power-adjusted regional prices and lets users switch between USD, EUR, GBP, INR and JPY. Pick your brand color, toggle dark mode and corner radius — the live preview and the React code update instantly in your browser.

Live component editor

Library
ReactVueHTML
Framework
TailwindBootstrap
Style
MinimalGlass
Theme
Corner radius
Live preview 
import 'bootstrap/dist/css/bootstrap.min.css';
import './theme.css';
import { useState } from 'react';

// Region → currency (extend as needed). Prices below are regional, not FX conversions.
const EUROZONE = ['AT', 'BE', 'CY', 'DE', 'EE', 'ES', 'FI', 'FR', 'GR', 'HR', 'IE', 'IT', 'LT', 'LU', 'LV', 'MT', 'NL', 'PT', 'SI', 'SK'];
const REGION_CURRENCY = { US: 'USD', GB: 'GBP', IN: 'INR', JP: 'JPY' };

function detectCurrency() {
  try {
    // Prefer a country injected by your edge (e.g. Cloudflare CF-IPCountry) if present.
    const region = document.documentElement.dataset.country || new Intl.Locale(navigator.language).maximize().region;
    if (REGION_CURRENCY[region]) return REGION_CURRENCY[region];
    if (EUROZONE.includes(region)) return 'EUR';
  } catch {
    // SSR / very old browsers → fall through to the default
  }
  return 'USD';
}

export default function CurrencyPricing() {
  const [currency, setCurrency] = useState(() => detectCurrency());

  return (
    <section className="px-4 py-5">
      <div className="mw-4xl mx-auto">
        <div className="text-center">
          <span className="badge rounded-pill bg-brand-subtle text-brand">Fair regional pricing</span>
          <h2 className="mt-2 fs-3 fw-bold text-body-emphasis">Pricing in your currency</h2>
          <p className="mt-2 text-body-secondary">We detected your currency automatically — switch any time.</p>
          <div className="mt-4 d-flex flex-wrap justify-content-center gap-2" role="group" aria-label="Currency">
            <button type="button" className="btn btn-outline-secondary choice fw-semibold rounded-2" onClick={() => setCurrency('USD')} aria-pressed={currency === 'USD'}>USD</button>
            <button type="button" className="btn btn-outline-secondary choice fw-semibold rounded-2" onClick={() => setCurrency('EUR')} aria-pressed={currency === 'EUR'}>EUR</button>
            <button type="button" className="btn btn-outline-secondary choice fw-semibold rounded-2" onClick={() => setCurrency('GBP')} aria-pressed={currency === 'GBP'}>GBP</button>
            <button type="button" className="btn btn-outline-secondary choice fw-semibold rounded-2" onClick={() => setCurrency('INR')} aria-pressed={currency === 'INR'}>INR</button>
            <button type="button" className="btn btn-outline-secondary choice fw-semibold rounded-2" onClick={() => setCurrency('JPY')} aria-pressed={currency === 'JPY'}>JPY</button>
          </div>
        </div>
        <div className="mt-5 row row-cols-1 row-cols-md-2 g-4">
          <div className="col">
            <div className="h-100 p-5 d-flex flex-column bg-body border shadow-sm rounded-3">
              <h3 className="fs-5 fw-semibold text-body-emphasis">Pro</h3>
              <p className="mt-1 small text-body-secondary">For individuals and small teams.</p>
              <p className="mt-4">
                <span hidden={currency !== 'USD'}><span className="fs-2 fw-bold text-body-emphasis">$29</span></span>
                <span hidden={currency !== 'EUR'}><span className="fs-2 fw-bold text-body-emphasis">€27</span></span>
                <span hidden={currency !== 'GBP'}><span className="fs-2 fw-bold text-body-emphasis">£23</span></span>
                <span hidden={currency !== 'INR'}><span className="fs-2 fw-bold text-body-emphasis">₹999</span></span>
                <span hidden={currency !== 'JPY'}><span className="fs-2 fw-bold text-body-emphasis">¥3,900</span></span>
                <span className="small text-body-secondary">/month</span>
              </p>
              <ul className="list-unstyled mt-4 mb-5 d-flex flex-column gap-2 flex-fill">
                <li className="small text-body">✓ Unlimited projects</li>
                <li className="small text-body">✓ Priority email support</li>
                <li className="small text-body">✓ Custom domain</li>
              </ul>
              <a href="#" className="btn btn-outline-secondary fw-semibold rounded-2 w-100">Choose Pro</a>
            </div>
          </div>
          <div className="col">
            <div className="h-100 p-5 d-flex flex-column bg-body border shadow-sm rounded-3 border-brand">
              <h3 className="fs-5 fw-semibold text-body-emphasis">Team</h3>
              <p className="mt-1 small text-body-secondary">For growing companies.</p>
              <p className="mt-4">
                <span hidden={currency !== 'USD'}><span className="fs-2 fw-bold text-body-emphasis">$79</span></span>
                <span hidden={currency !== 'EUR'}><span className="fs-2 fw-bold text-body-emphasis">€73</span></span>
                <span hidden={currency !== 'GBP'}><span className="fs-2 fw-bold text-body-emphasis">£62</span></span>
                <span hidden={currency !== 'INR'}><span className="fs-2 fw-bold text-body-emphasis">₹2,999</span></span>
                <span hidden={currency !== 'JPY'}><span className="fs-2 fw-bold text-body-emphasis">¥11,000</span></span>
                <span className="small text-body-secondary">/month</span>
              </p>
              <ul className="list-unstyled mt-4 mb-5 d-flex flex-column gap-2 flex-fill">
                <li className="small text-body">✓ Everything in Pro</li>
                <li className="small text-body">✓ 10 seats included</li>
                <li className="small text-body">✓ SSO & audit log</li>
              </ul>
              <a href="#" className="btn btn-brand fw-semibold rounded-2 w-100">Choose Team</a>
            </div>
          </div>
        </div>
        <p className="mt-4 text-center small text-body-secondary">Prices exclude local taxes. You are charged in the currency shown.</p>
      </div>
    </section>
  );
}

More Bootstrap components for React

All components →

Free Bootstrap 5 Currency Pricing Table for React by pGento

Install Bootstrap 5 for React

Create a React project with Vite and install Bootstrap:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm install bootstrap

Save the generated theme.css next to the component; the component file already imports bootstrap/dist/css/bootstrap.min.css and ./theme.css. No Bootstrap JavaScript is required — interactivity uses useState.

Use the currency pricing table in React

// App.jsx
import CurrencyPricing from './CurrencyPricing';

export default function App() {
  return <CurrencyPricing />;
}

How currency detection works

The generated detectCurrency() reads the browser locale (navigator.language → Intl.Locale(...).maximize().region) and maps the region to a currency — no network request, no third-party geo-IP service, nothing to slow down rendering.

For IP-based detection, pass the country from your CDN: Cloudflare exposes it as the CF-IPCountry request header (and request.cf.country in Workers). Inject it into the page (for example as <html data-country="IN">) and read it first in detectCurrency(). Always let users override the guess, and charge in the currency you display.

Accessibility & customization

The currency switcher is a labelled group of toggle buttons using aria-pressed; prices are rendered as text for every currency so screen readers and search engines always see a price.

Every color, radius and dark-mode choice is baked into plain Bootstrap classes plus a tiny CSS-variable theme file, so the copied code has no runtime dependency on this site.

Compatibility

ItemDetails
CSS frameworkBootstrap 5.3+ (CSS only)
LibraryReact 18+ (function component)
Interactive statecurrency
Dark modeYes — toggle in the editor
StyleMinimal

Frequently asked questions

How do I install this Bootstrap currency pricing table in React?
Create a React project, install Bootstrap 5 as shown in the installation section, then paste the generated code. Also save the generated theme.css file.
Can I change the color of the currency pricing table?
Yes. Use the brand color picker or type any hex code — the preview and code update instantly, and the color is written directly into the classes you copy.
Does the currency pricing table support dark mode?
Yes. Toggle “Dark mode” in the editor to generate a dark palette version of the same component.
Is the currency pricing table accessible?
The currency switcher is a labelled group of toggle buttons using aria-pressed; prices are rendered as text for every currency so screen readers and search engines always see a price.
Is this component free for commercial use?
Yes. The generated code is yours to use in personal and commercial projects without attribution.
Bootstrap 5 Currency Pricing Table for React

Embed this tool on your site

Paste this code into any web page. It stays free, fast and ad-free inside your site.

Print or save as PDF

Prints just this tool and its result. Choose “Save as PDF” as the printer to get a file. Branding is stored only in this browser.