Home / Components / Pricing
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
mammoth templates


