Pricing Components

Tiered cards

One card per plan, with a billing-cycle tab strip above them.

Passdata

as { tabs: [{ plans: [...] }] } — the tabs become the billing-cycle strip.

popular={true}

on a plan scales that card up and accents it.

Dot matrix cards

Minimalist cards with top dot-matrix pattern, corner frame accents, and featured glow state.

RenderPricingDotPattern

with plans — each a badgeTag, price, period, description and features under a featuresTitle. featured gives that card the glow.

Scale cards

Modern dual-card layout with launch & scale plans, monthly/annual toggle, and bottom strategy call CTA.

RenderPricingScale

with plans as { monthly, annually } — two plans each. A plan's popularBadgeText and featuresTitle label the highlighted card and its list; footerTitle, footerSubtitle and footerCtaText / footerCtaHref write the strategy-call strip.

Elegant cards

Setvariant="elegant"

for a lighter type scale and a top-border accent that lifts on hover.

counting={false}

disables animated price counting for a static numeric display.

Minimal cards

Setvariant="minimal"

to drop the card borders — the popular plan is marked by a single ring instead.

Bordered cards

Setvariant="bordered"

for the neo-brutalist take: square corners, thick borders, offset shadows.

Quote builder

color

is PricingBuilder's primary theme prop — it carries its own module data and recalculates the animated total itself.

Comparison table

data

on PricingTable lays plans out as columns and features as grouped rows. A values entry may be true, false or a string.

Usage slider

data

on PricingSlider defines the volume tiers — dragging updates the tier, price and included limits together.

Typographic menu

data

on PricingTypographic takes every plan in one array; tag each with billingCycle to drive the monthly/yearly switch — a ToggleGroup in the block's color.

Interactive service checklist

PricingPlans

calculates estimated cost based on selected services (Design, Development, Fast Track).