Content v1.0.0

Pricing Table

Pricing plans display with monthly/yearly toggle. Available as side-by-side cards or feature comparison table with highlighted popular plan.

Cards

Side-by-side pricing cards with feature lists

Options

Name Type Default Description
plans * Array required Array of plan hashes with :name, :price, :yearly_price, :period, :description, :features, :cta_label, :cta_href, :popular
currency String "$" Currency symbol
billing_period Boolean false Show monthly/yearly toggle
monthly_label String "Monthly" Monthly toggle label
yearly_label String "Yearly" Yearly toggle label
yearly_discount String "Save 20%" Yearly discount badge text

Comparison

Feature comparison table with checkmarks across plans

Options

Name Type Default Description
plans * Array required Array of plan hashes with :name, :price, :yearly_price, :cta_label, :cta_href, :popular
feature_groups * Array required Array of feature group hashes with :name and :features array
currency String "$"
billing_period Boolean false
monthly_label String "Monthly"
yearly_label String "Yearly"
yearly_discount String "Save 20%"

Changelog v1.0.0

- Initial release with cards and comparison styles
- Monthly/yearly billing toggle
- Popular plan highlighting

Get Full Access

Unlock the source code for this component and all others. One-time payment for lifetime access.

Get Access Now