Pricing & Conversion

PricingCard

The middle one is glowing. Choose accordingly.

Compound pricing tile. The `featured` prop applies the gradient border + lift used for the 'Most popular' tier. Compose any subset of subcomponents in any order.

Install

Copy this owned-code component into your app from the registry.

pnpm dlx shadcn-svelte@latest add https://benjamin-brady.github.io/performative-ui-svelte/registry/pricing-card.json

Examples

Three tiers

Hobby

$0 /mo

For weekend experiments.

10K tokens / day
Community support

Start free

Most popular

Pro

$49 /mo

For the serious solo builder.

1M tokens / day
Priority routing
Unlimited projects

Upgrade

Enterprise

Custom

For teams who say "leverage" a lot.

VPC deploy
SOC 2 / HIPAA

Talk to sales

<PricingCard featured>
  <PricingCard.Flag>Most popular</PricingCard.Flag>
  <PricingCard.Tier>Pro</PricingCard.Tier>
  <PricingCard.Amount unit="/mo">$49</PricingCard.Amount>
  <PricingCard.Blurb>For the serious solo builder.</PricingCard.Blurb>
  <PricingCard.Features>
    <li>1M tokens / day</li>
    <li>Priority routing</li>
  </PricingCard.Features>
  <PricingCard.CTA href="/upgrade">Upgrade</PricingCard.CTA>
</PricingCard>

Props

Prop	Type	Default	Description
featured	boolean	-	Gradient border + glow + lift.

PricingCard.Flag

Prop	Type	Default	Description
hideSparkle	boolean	-	Drop the leading ✦.

PricingCard.Tier

PricingCard.Amount

Prop	Type	Default	Description
unit	Snippet	-	Suffix like /mo.

PricingCard.Blurb

PricingCard.Features

PricingCard.CTA

Prop	Type	Default	Description
href	string	-	Anchor target.

Next BeforeAfter ] →