Pricing Components

Selectable workspace plans

Interactive radio-selectable plans with Monthly/Annual toggle, team seat stepper, and responsive mobile accordion view.

Setvariant="plans-pro"

for selectable workspace plans with a sliding Monthly/Annual switch, Team Seats stepper, and orbiting border on the selected tier.

RenderPricingPlansPro

with plans (monthlyPrice, yearlyPrice, subtitle, features). Automatically switches from a 3-column card grid on desktop to an expandable radio stack on mobile.

scalePriceWithUsers={true}

multiplies each plan's displayed price as the user increments or decrements the Team Seats stepper.

Tiered cards

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

Setvariant="default"

for the classic three-column tiered subscription layout.

Passdata

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

popular={true}

on a plan scales that card up, accents it with the theme border, and adds a subtle 3D tilt hover effect.

Dot matrix cards

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

Setvariant="dot-pattern"

for minimalist cards with a dot-matrix header pattern and corner angle brackets.

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.

Setvariant="scale"

for the dual-panel launch & scale cards with a bottom strategy-call banner.

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

Setvariant="builder"

for an interactive modular quote calculator.

color

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

Comparison table

Setvariant="table"

for a multi-column feature comparison matrix.

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

Setvariant="slider"

for a volume-based range slider pricing tier.

data

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

Typographic menu

Setvariant="typographic"

for an editorial horizontal list layout.

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

Setvariant="plans"

for an interactive service toggle checklist and live quote card.

PricingPlans

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