RSK World - Pricing Table UI Component | Monthly/Yearly Toggle, Multi-Currency, Dark Mode | RSK World

Pricing Cards Toggle & Currency Dark Mode Comparison Vanilla JS

Pricing Table UI Component is a responsive pricing section with monthly/yearly billing toggle (Save 20%), USD/EUR/INR currency selector, dark/light theme with localStorage; comparison page (comparison.html) with full feature matrix; FAQ accordion using native details/summary; trust badges; plan recommender by team size; keyboard shortcuts (M/Y, 1/2/3, ?); share link; copy plan summary; promo code demo (SAVE10); sticky selection bar; scroll-to-top; high contrast mode; print and reduced-motion styles. HTML5, CSS3, Vanilla JavaScript. By rskworld.in.

If you find this Pricing Table project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Pricing Table

Monthly/Yearly Toggle & Billing

Toggle between monthly and yearly billing with "Save 20%" badge. Preference saved in localStorage. Annual total and savings line (e.g. "You save $X/year") when yearly is selected. URL state supports ?billing=yearly.

Toggle with active state on Monthly/Yearly labels
Price wrappers show monthly or yearly via .show-yearly class
localStorage key: rsk_pricing_billing
Keyboard: M = monthly, Y = yearly

Project Structure & Files

index.html (main pricing cards, FAQ, trust badges). comparison.html (comparison table). CSS: styles.css (global, theme, print, reduced-motion), comparison.css (table layout). JS: script.js (toggle, theme, currency, URL, shortcuts), config.js (plans, currencies, FAQ).

index.html – cards, toggle, promo, recommender, FAQ
comparison.html – feature matrix, same theme
config.js – single source for plans, currencies, FAQ
Font Awesome 6, no build step

Dark Mode & High Contrast

Theme toggle (sun/moon) with dark/light mode; respects prefers-color-scheme; persisted in localStorage (rsk_pricing_theme). High contrast toggle for stronger borders and focus outlines (rsk_pricing_contrast).

CSS variables for light/dark (--color-bg, --color-surface, etc.)
Theme and contrast stored in localStorage
Comparison page syncs theme from localStorage
Toast on theme change

Multi-Currency

USD, EUR, INR with symbols and prices from config.js. Currency choice persisted (rsk_pricing_currency). Price count-up animation when switching currency. URL supports ?currency=EUR.

config.plans[].monthly/yearly per currency
animateValue() for smooth number transition
Annual total and savings update with currency
Toast on currency change

Comparison Table

comparison.html shows all plans side-by-side with feature matrix. Pro column highlighted. Same top bar and dark mode; theme synced via inline script and localStorage.

comparison.css – table layout, .col-featured
Back to pricing link to index.html
Check/cross icons for features
CTA row: Get Started / Contact Sales

What You Get

Static HTML/CSS/JS: index.html, comparison.html, styles.css, comparison.css, script.js, config.js. No build step. Open index.html or serve folder.

Complete source – HTML, CSS, JS, config
No build step – open index.html or static server
README.md, LICENSE included
Technologies: HTML5, CSS3, Vanilla JS. © 2026 Molla Samser (RSK World).

Usage

Open index.html. Use top bar for theme, currency, Compare plans link. Toggle monthly/yearly; use "Find your plan" by team size; try promo SAVE10. Press ? for keyboard shortcuts.

index.html – pricing cards, FAQ, trust badges
comparison.html – Compare plans in top bar
Accessibility: skip link, focus-visible, reduced-motion
Author: Molla Samser | rskworld.in

Keyboard Shortcuts & UX

M/Y = billing; 1/2/3 = focus Basic/Pro/Enterprise and scroll; ? = shortcut help modal; Esc = close. Share link copies URL with billing and currency. Copy plan button per card. Sticky selection bar after CTA click. Scroll-to-top button.

Shortcut overlay with kbd list
Share link and copy plan use clipboard + toast
Sticky bar shows selected plan name, price, CTA
Scroll-to-top visible after 300px scroll

Project Features

Monthly/yearly toggle, multi-currency (USD/EUR/INR), dark mode, high contrast, comparison table, FAQ accordion, plan recommender, promo code (SAVE10), keyboard shortcuts, share link, copy plan, sticky bar, toast, print and reduced-motion support.