HTML · CSS · Vanilla JS · No build step

Pricing tables that sell for you

15 polished pricing pages powered by one tiny engine. Edit plans with simple data attributes, switch billing and currency, and theme everything with CSS variables.

Browse 15 demos Read the docs
15ready demos
8color themes
6card styles
11currencies
0dependencies
Billing toggle

Monthly, quarterly and yearly with automatic "Save 20%" labels.

Currency switcher

Correct symbols, separators and position. Auto-convert or set exact prices.

Usage sliders

Per-seat and tiered usage pricing that recalculates live.

Comparison tables

Sticky headers, tooltips, groups and plan tabs on mobile.

Themes, dark & RTL

8 accents, light and dark mode and right-to-left layouts.

Add-ons & quantity

Checkbox extras and quantity fields update the total.

Badges & states

Most Popular, Best Value, Limited, Sold Out and Current Plan.

Accessible

Keyboard toggles, ARIA labels, live regions and reduced motion.

All demos

SaaS & Software SaaS 3-Tier Basic, Pro and Enterprise with a Most Popular badge and yearly savings. Billing switchBadges SaaS & Software Billing Toggle Monthly, quarterly and yearly with animated prices and a currency menu. 3 cyclesCurrency SaaS & Software Comparison Table Full feature matrix with sticky headers, tooltips and mobile plan tabs. Sticky headerTooltips SaaS & Software Single Plan Highlight One featured plan with a two-column feature list and a testimonial. TestimonialXL price SaaS & Software Usage-Based Slider Drag to set contacts; tiered prices update live and the best plan lights up. Range sliderTiers SaaS & Software Free vs Pro Two-column upgrade page with a current-plan state and a usage meter. Current planUpgrade SaaS & Software Tabbed Pricing Individual, Team and Enterprise tabs with a per-seat calculator. TabsPer seat Services Freelancer Packages Fiverr-style packages with delivery time, revisions and paid extras. Add-onsOne-time Industry Web Hosting Plans Four plans, a data-center selector, currency switch and spec table. Location4 columns Industry Online Course Single course, bundle or lifetime access with a countdown deal. CountdownOld price Industry Gym Membership Dark membership passes with class schedules and add-ons. Dark modeAdd-ons Industry Mobile App Paywall In-app purchase screen in a phone frame with selectable plans. Phone framePaywall Industry Event Tickets Early bird, regular and VIP tickets with sold-out states and quantities. Sold outQuantity Creative Pricing with FAQ Minimal plan columns, an accordion FAQ and a closing call to action. MinimalAccordion Creative Dark Neon Glass Frosted glass cards, neon glow and flip animations on a dark canvas. GlassNeon
Easy editing

Change a price without touching JavaScript

Every plan is plain HTML. Set the monthly and yearly price with data attributes and the engine handles the toggle, currency, savings label, badge and animation for you. Prefer JSON? Point a section at a JSON file instead.

<div class="pt-card"
     data-monthly="19"
     data-yearly="190"
     data-badge="Most Popular">
  <h3 class="pt-name">Pro</h3>
  <div class="pt-price"></div>  <!-- filled for you -->
  <ul class="pt-features">
    <li class="yes">10 projects</li>
    <li class="no">Custom domain</li>
  </ul>
  <a href="#" class="pt-btn pt-btn--primary">Get Started</a>
</div>