Mammoth Templates logomammoth templates

Home / Components / Pricing

Video preview

Pricing Table Pack gives you six production-ready layouts - cards, spotlight, rows, compact grid, comparison table and a usage slider - driven by a single JSON-style config. Mount it with one line of JavaScript or declare it in HTML and the component renders, animates and themes itself. Everything a SaaS pricing page needs is built in: monthly/yearly switch with animated price changes and an auto-calculated savings pill, a highlighted plan with badge, accessible feature tooltips, sticky comparison headers, select events for your checkout flow, and light/dark theming through CSS variables.

The component is plain HTML, CSS and vanilla JavaScript (about 9 KB gzipped), has no dependencies and works by double-clicking the demo. The demo page doubles as documentation, with copy-paste snippets, an options reference and a live theme playground.

Highlights

  • 6 layouts: cards, spotlight, rows, compact, comparison table, usage slider
  • Monthly/yearly toggle with animated prices and auto Save N% pill
  • Accessible feature tooltips (hover, focus, tap, Esc)
  • Sticky-header comparison table with grouped rows
  • Select and period events plus onSelect callback for checkout
  • CSS-variable theming, light/dark auto, reduced-motion safe
  • Zero dependencies, file:// friendly, CC0 licensed