Pricing Table Widget Demo

Demo 1: 3-Tier Pricing (Basic, Pro, Enterprise)

Standard pricing table with a featured/recommended plan.

<div data-tradecalcs-pricing>
  <div data-pricing-plan data-featured="true">
    <div data-plan-name>Professional</div>
    <div data-plan-price>$99<span data-price-period>/month</span></div>
    <div data-plan-description>Best for growing teams</div>
    <div data-plan-features>
      <div data-feature>Feature 1</div>
      <div data-feature data-unavailable>Feature 2</div>
    </div>
    <a href="#" data-plan-cta>Get Started</a>
  </div>
</div>

Demo 2: Annual Pricing (One-Time Payment)

Pricing table for one-time or annual payments.

Demo 3: Simple 2-Column Pricing

For businesses with just two service tiers.

Demo 4: Custom Theme (Green Construction Brand)

Customized colors using CSS variables to match brand identity.

<div data-tradecalcs-pricing
     style="--tc-pricing-accent: #10b981;
            --tc-pricing-accent-hover: #059669;
            --tc-pricing-bg: #f0fdf4;">
  <!-- plans -->
</div>

Configuration Options

Data Attributes

• data-tradecalcs-pricing (required) — Main container
• data-pricing-plan (required) — Individual plan card
• data-featured="true" (optional) — Marks plan as recommended/featured
• data-plan-name (required) — Plan name (e.g., "Professional")
• data-plan-price (required) — Price (e.g., "$99")
• data-price-period (optional) — Billing period (e.g., "/month")
• data-plan-description (optional) — Short description
• data-plan-features (optional) — Features list container
• data-feature (required for features) — Individual feature
• data-unavailable (optional) — Marks feature as unavailable (crossed out)
• data-plan-cta (required) — Call-to-action button

CSS Custom Properties

• --tc-pricing-bg — Plan card background
• --tc-pricing-border — Plan card border color
• --tc-pricing-text — Primary text color
• --tc-pricing-text-muted — Secondary text color
• --tc-pricing-accent — Accent color (CTA button, featured badge)
• --tc-pricing-accent-hover — Accent hover color
• --tc-pricing-featured-bg — Featured plan background
• --tc-pricing-featured-border — Featured plan border
• --tc-pricing-unavailable — Unavailable feature color
• --tc-pricing-gap — Gap between plans
• --tc-pricing-padding — Plan card padding
• --tc-pricing-radius — Border radius

JavaScript API

// Initialize all pricing tables manually
TradeCalcsPricing.init();

// Initialize specific pricing table
const element = document.querySelector('[data-tradecalcs-pricing]');
TradeCalcsPricing.initElement(element);

// Check if user prefers reduced motion
if (TradeCalcsPricing.prefersReducedMotion()) {
  console.log('User prefers reduced motion');
}

// Listen for initialization
element.addEventListener('tc-pricing-initialized', function(e) {
  console.log('Pricing table initialized', e.detail);
});

Features

• ✅ Pure vanilla JavaScript — no dependencies
• ✅ Lightweight — ~4KB total (JS + CSS)
• ✅ Auto-initialization — works immediately after loading
• ✅ Mobile responsive — stacks vertically on small screens
• ✅ Accessible — ARIA labels for screen readers
• ✅ Keyboard navigation — fully keyboard accessible
• ✅ Dark mode support — respects prefers-color-scheme
• ✅ Reduced motion support — respects prefers-reduced-motion
• ✅ Customizable — CSS variables for easy theming
• ✅ Multiple instances — unlimited pricing tables per page
• ✅ Featured plan highlighting — visually emphasize recommended plan
• ✅ Self-hosted — own it forever, no recurring fees

Use Cases

• SaaS Pricing — Monthly or annual subscription tiers
• Service Packages — Standard, premium, enterprise service levels
• Product Bundles — One-time product packages
• Contractor Services — Kitchen, bathroom, remodel package pricing
• Membership Tiers — Free, basic, premium membership levels
• Course Pricing — Course bundles and access tiers

Browser Support

Works in all modern browsers:

• ✅ Chrome/Edge (Chromium) — Full support
• ✅ Safari — Full support
• ✅ Firefox — Full support
• ✅ Mobile Safari (iOS) — Full support
• ✅ Chrome Mobile (Android) — Full support