Pricing

@summonware/ui · pricing · P3 · Advanced UI
No reference page demonstrates this component — it was inferred from the screens that use one, so there is no variant matrix behind it.

Usage

A tier comparison grid — plan name, price, feature list, one clear CTA per tier. `highlighted` marks the recommended plan with emphasis (border, elevated shadow, solid CTA), matching how every real pricing page directs attention to one option.
import { Pricing } from '@summonware/ui';

Best practices

DoHighlight exactly one tier. Highlighting none makes the grid flat and directionless; highlighting more than one defeats the point of highlighting at all.
Don'tList more than 4-6 features per tier. A feature list that needs scrolling to compare stops being a comparison.

Examples

Common configurations, variations and states.

Three-tier pricing

Starter

For trying things out.

$0/mo
  • 1 project
  • Community support
  • Core components

Pro

For teams shipping regularly.

$49/mo
  • Unlimited projects
  • Priority support
  • All components
  • Theme presets

Enterprise

For larger orgs with real requirements.

Custom
  • SSO
  • Dedicated support
  • Custom contracts
Pro is highlighted as the recommended plan.

Where it appears

Used on 1 catalogued screens, including admins-membership-pricing.