All categories

pricing/*

Pricing

Tier comparison cards with popular highlight, or simple two-column.

2 variants
@vireya/blocks/pricing/tiers

N-column comparison with optional highlighted tier per row.

server
Pricing

Pick a plan that scales with you

Start free, upgrade when you ship to production.

  • Starter

    Personal projects and prototypes.

    $0/ forever

    • Up to 3 projects

    • Community support

    • Core components

    • MIT license

  • Most popular

    Pro

    For teams shipping production apps.

    $29/ month

    • Unlimited projects

    • Priority support

    • Premium blocks

    • Theming sandbox

    • Early access

  • Enterprise

    For organizations with custom needs.

    Custom

    • SLA + dedicated support

    • Self-hosted artifacts

    • Audit logs

    • SSO/SAML

@vireya/blocks/pricing/twoTier

Two side-by-side, with one optionally inverted.

server
Pricing

Simple, honest pricing

One free tier, one paid tier. No surprises.

Hobby

Everything you need to ship side projects.

$0/ month

  • Unlimited public projects

  • Community support

  • Core components

Studio

Built for teams shipping client work.

$49/ month

  • Unlimited private projects

  • Priority support

  • All premium blocks

  • Team seats included

Understanding Pricing

The pricing block is where interest becomes a decision. Its job is to make plans comparable at a glance, guide the visitor toward the right tier, and remove friction and doubt before the call to action. Layout and emphasis do real persuasion work here.

Vireya offers multi-tier comparison cards with a 'popular' highlight and a simpler two-column layout, both prop-driven.

When to use

  • Presenting plans or tiers for a product or service.
  • Steering buyers toward a recommended plan with a highlighted tier.
  • A focused two-option decision (e.g. monthly vs annual, free vs pro).

When to avoid

  • More tiers than a visitor can compare — three or four is usually the limit.
  • Hiding the information buyers need (what's included, real prices).

Best practices

  • Highlight one recommended tier to anchor the decision.
  • List features as outcomes and keep rows aligned across tiers for scanning.
  • Put the most popular or best-value plan in the visually dominant position.
  • Pair each tier with a clear, specific call to action.

Accessibility

  • Use a real table or consistent structure so comparisons are navigable.
  • Don't signal the recommended tier with colour alone — add a label.
  • Ensure the highlighted card still meets contrast requirements.

Frequently asked questions

How many pricing tiers should I show?
Usually three, occasionally four. Beyond that, comparison becomes work and decision paralysis sets in. Highlight one recommended tier to anchor the choice and reduce the cognitive load.
Should I highlight a 'most popular' plan?
Yes — a single highlighted tier anchors the decision and nudges buyers toward the plan you want to sell. Vireya's pricing block supports a popular-tier highlight out of the box, with a label so it isn't signalled by colour alone.