Marketing

Pricing Card

new

A plan card with a price, a feature list and a call to action.

Starter

For solo makers shipping their first product.

$9per seat / month

$108 per seat, billed yearly

All free components
3 Pro blocks per month
Community support

Team

For product teams who ship every week.

Installation

npx shadcn@latest add @blank/pricing-card

Usage

import {
  PricingCard,
  PricingCardCurrency,
  PricingCardFeature,
  PricingCardFeatures,
  PricingCardFooter,
  PricingCardHeader,
  PricingCardPeriod,
  PricingCardPrice,
  PricingCardTitle,
  PricingCardValue,
} from "@/components/ui/pricing-card"

<PricingCard featured>
  <PricingCardHeader>
    <PricingCardTitle>Team</PricingCardTitle>
  </PricingCardHeader>
  <PricingCardPrice>
    <PricingCardValue>
      <PricingCardCurrency>$</PricingCardCurrency>39
    </PricingCardValue>
    <PricingCardPeriod>per seat / month</PricingCardPeriod>
  </PricingCardPrice>
  <PricingCardFeatures>
    <PricingCardFeature>Every Pro component</PricingCardFeature>
  </PricingCardFeatures>
  <PricingCardFooter>
    <Button>Get Team</Button>
  </PricingCardFooter>
</PricingCard>

The price is split into parts so the currency, the amount and the period can each be styled — and so the amount can be animated on its own when billing switches, as in the demo above. featured rings the plan you want most people to pick in ink (your --brand); use it on one card per row.

Examples

Excluded features

included={false} keeps a feature in the list, marked as missing, so plans can be compared line by line.

Lifetime

Pay once, keep every update to version 3.

$249one-time

Every Pro component and block
Figma library
Commercial license
Seats for a team (not included)
Private Slack channel (not included)