[ [UI.115] SaaS ] Pricing Card

Pricing Card

> A terminal-style pricing display component for checkout flows and landing pages. Features urgency messaging, discount display, and flexible CTA slot.

Import

[ [0x5B] IMPORT ]

1import { PricingCard } from "@/components/ui/pricing-card"

Preview

[ [0x00] PRICING CARD ]

[0x41] PRICING_CONFIG

ONE-TIME LIFETIME ACCESS

OFFER ENDS SOON!

$299

$199

SAVE $100 Instantly!

ONE TIME PAYMENT

✓ NO SUBSCRIPTION

✓ UNLIMITED PROJECTS

✓ PRODUCTION-READY

30-day money-back guarantee. No questions asked.

1<PricingCard
2  price="$199"
3  regularPrice="$299"
4  discountMessage="SAVE $100 Instantly!"
5  urgencyMessage="OFFER ENDS SOON!"
6  highlights={['NO SUBSCRIPTION', 'UNLIMITED PROJECTS', 'PRODUCTION-READY']}
7  trustLine="30-day money-back guarantee. No questions asked."
8>
9  <Button className="...">
10    GET ACCESS — $199
11    <ArrowRight className="h-5 w-5" />
12  </Button>
13</PricingCard>

Variants

[ [0x00] MINIMAL (NO DISCOUNT) ]

[0x41] PRICING_CONFIG

MONTHLY ACCESS

$49

PER MONTH

✓ CANCEL ANYTIME

✓ ALL FEATURES

1<PricingCard
2  price="$49"
3  title="MONTHLY ACCESS"
4  priceSubtext="PER MONTH"
5  highlights={['CANCEL ANYTIME', 'ALL FEATURES']}
6>
7  <Button className="...">
8    SUBSCRIBE NOW
9  </Button>
10</PricingCard>

[ [0x00] ENTERPRISE (CONTACT SALES) ]

[0xEE] PRICING_CONFIG

ENTERPRISE LICENSE

CUSTOM

TAILORED FOR YOUR TEAM

✓ VOLUME LICENSING

✓ PRIORITY SUPPORT

✓ CUSTOM INTEGRATIONS

Schedule a call with our enterprise team.

1<PricingCard
2  price="CUSTOM"
3  title="ENTERPRISE LICENSE"
4  priceSubtext="TAILORED FOR YOUR TEAM"
5  headerCode="0xEE"
6  highlights={['VOLUME LICENSING', 'PRIORITY SUPPORT', 'CUSTOM INTEGRATIONS']}
7  trustLine="Schedule a call with our enterprise team."
8>
9  <Button variant="outline" className="...">
10    CONTACT SALES
11  </Button>
12</PricingCard>

[ [0x00] ANNUAL PRICING ]

[0x41] PRICING_CONFIG

ANNUAL PLAN

$588

$399

2 MONTHS FREE!

BILLED YEARLY

✓ BEST VALUE

✓ ALL FEATURES

✓ PRIORITY SUPPORT

1<PricingCard
2  price="$399"
3  regularPrice="$588"
4  discountMessage="2 MONTHS FREE!"
5  title="ANNUAL PLAN"
6  priceSubtext="BILLED YEARLY"
7  highlights={['BEST VALUE', 'ALL FEATURES', 'PRIORITY SUPPORT']}
8>
9  <Button>START ANNUAL PLAN</Button>
10</PricingCard>

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
price*	`string`	-	Main price to display (e.g., "$199" or "CUSTOM").
regularPrice	`string`	-	Original price shown crossed out.
discountMessage	`string`	-	Discount callout text (e.g., "SAVE $100!").
title	`string`	`"ONE-TIME LIFETIME ACCESS"`	Header title text.
urgencyMessage	`string`	-	Pulsing urgency text (e.g., "OFFER ENDS SOON!").
priceSubtext	`string`	`"ONE TIME PAYMENT"`	Subtext below the price.
highlights	`string[]`	`[]`	Array of highlight badges.
trustLine	`string`	-	Trust/guarantee text at bottom.
headerCode	`string`	`"0x41"`	Terminal header code identifier.
children	`React.ReactNode`	-	CTA button or checkout component.
className	`string`	-	Additional CSS classes.

Usage

[ [0x5F] WITH STRIPE CHECKOUT ]

Integrate with Stripe for payment processing:

1'use client';
2
3import { PricingCard } from '@/components/ui/pricing-card';
4import { Button } from '@/components/ui/button';
5import { ArrowRight } from 'lucide-react';
6
7export function CheckoutCard() {
8  const handleCheckout = async () => {
9    const res = await fetch('/api/stripe/checkout', {
10      method: 'POST',
11      headers: { 'Content-Type': 'application/json' },
12      body: JSON.stringify({ priceId: 'price_xxx' }),
13    });
14    const { url } = await res.json();
15    window.location.href = url;
16  };
17
18  return (
19    <PricingCard
20      price="$199"
21      regularPrice="$299"
22      discountMessage="SAVE $100!"
23      urgencyMessage="LAUNCH SPECIAL!"
24      highlights={['LIFETIME ACCESS', 'ALL UPDATES']}
25      trustLine="30-day money-back guarantee."
26    >
27      <Button onClick={handleCheckout} className="w-full">
28        BUY NOW — $199 <ArrowRight className="ml-2 h-4 w-4" />
29      </Button>
30    </PricingCard>
31  );
32}

[ [0x5E] WITH POLAR CHECKOUT ]

Using Polar.sh for payment:

1import { PricingCard } from '@/components/ui/pricing-card';
2import { PolarCheckoutButton } from '@/components/polar/checkout-button';
3
4export function PolarPricingCard() {
5  return (
6    <PricingCard
7      price="$199"
8      highlights={['NO SUBSCRIPTION', 'UNLIMITED PROJECTS']}
9    >
10      <PolarCheckoutButton className="w-full">
11        GET ACCESS — $199
12      </PolarCheckoutButton>
13    </PricingCard>
14  );
15}

[ [0xBD] ENTERPRISE CONTACT FORM ]

Link to Calendly or contact form:

1import { PricingCard } from '@/components/ui/pricing-card';
2import { Button } from '@/components/ui/button';
3import Link from 'next/link';
4
5export function EnterpriseCard() {
6  return (
7    <PricingCard
8      price="CUSTOM"
9      title="ENTERPRISE"
10      priceSubtext="VOLUME LICENSING"
11      headerCode="0xEE"
12      highlights={['DEDICATED SUPPORT', 'CUSTOM SLA', 'ONBOARDING']}
13      trustLine="Talk to our team about your requirements."
14    >
15      <Link href="https://calendly.com/your-link" target="_blank">
16        <Button variant="outline" className="w-full">
17          SCHEDULE A CALL
18        </Button>
19      </Link>
20    </PricingCard>
21  );
22}

[ [0xE3] SIDE-BY-SIDE PRICING ]

Display multiple tiers together:

1<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
2  {/* Starter */}
3  <PricingCard
4    price="$49"
5    title="STARTER"
6    priceSubtext="PER MONTH"
7    highlights={['5 PROJECTS', 'BASIC SUPPORT']}
8  >
9    <Button variant="outline">SELECT STARTER</Button>
10  </PricingCard>
11
12  {/* Pro - Featured */}
13  <PricingCard
14    price="$199"
15    regularPrice="$299"
16    title="PRO"
17    urgencyMessage="MOST POPULAR"
18    highlights={['UNLIMITED', 'PRIORITY SUPPORT']}
19  >
20    <Button>SELECT PRO</Button>
21  </PricingCard>
22
23  {/* Enterprise */}
24  <PricingCard
25    price="CUSTOM"
26    title="ENTERPRISE"
27    priceSubtext="CONTACT SALES"
28    highlights={['VOLUME PRICING', 'DEDICATED REP']}
29  >
30    <Button variant="outline">CONTACT SALES</Button>
31  </PricingCard>
32</div>

Accessibility

[ [0x58] A11Y ]

Semantic heading structure for pricing tiers
High contrast text meets WCAG 2.1 AA standards
Animated elements use prefers-reduced-motion media query
CTA buttons are keyboard accessible
Screen readers can parse pricing structure

Preview

[ [0x00] PRICING CARD ]

[0x41] PRICING_CONFIG

ONE-TIME LIFETIME ACCESS

OFFER ENDS SOON!

$299

$199

SAVE $100 Instantly!

ONE TIME PAYMENT

✓ NO SUBSCRIPTION

✓ UNLIMITED PROJECTS

✓ PRODUCTION-READY

30-day money-back guarantee. No questions asked.

1<PricingCard
2  price="$199"
3  regularPrice="$299"
4  discountMessage="SAVE $100 Instantly!"
5  urgencyMessage="OFFER ENDS SOON!"
6  highlights={['NO SUBSCRIPTION', 'UNLIMITED PROJECTS', 'PRODUCTION-READY']}
7  trustLine="30-day money-back guarantee. No questions asked."
8>
9  <Button className="...">
10    GET ACCESS — $199
11    <ArrowRight className="h-5 w-5" />
12  </Button>
13</PricingCard>

Variants

[ [0x00] MINIMAL (NO DISCOUNT) ]

[0x41] PRICING_CONFIG

MONTHLY ACCESS

$49

PER MONTH

✓ CANCEL ANYTIME

✓ ALL FEATURES

1<PricingCard
2  price="$49"
3  title="MONTHLY ACCESS"
4  priceSubtext="PER MONTH"
5  highlights={['CANCEL ANYTIME', 'ALL FEATURES']}
6>
7  <Button className="...">
8    SUBSCRIBE NOW
9  </Button>
10</PricingCard>

[ [0x00] ENTERPRISE (CONTACT SALES) ]

[0xEE] PRICING_CONFIG

ENTERPRISE LICENSE

CUSTOM

TAILORED FOR YOUR TEAM

✓ VOLUME LICENSING

✓ PRIORITY SUPPORT

✓ CUSTOM INTEGRATIONS

Schedule a call with our enterprise team.

1<PricingCard
2  price="CUSTOM"
3  title="ENTERPRISE LICENSE"
4  priceSubtext="TAILORED FOR YOUR TEAM"
5  headerCode="0xEE"
6  highlights={['VOLUME LICENSING', 'PRIORITY SUPPORT', 'CUSTOM INTEGRATIONS']}
7  trustLine="Schedule a call with our enterprise team."
8>
9  <Button variant="outline" className="...">
10    CONTACT SALES
11  </Button>
12</PricingCard>

[ [0x00] ANNUAL PRICING ]

[0x41] PRICING_CONFIG

ANNUAL PLAN

$588

$399

2 MONTHS FREE!

BILLED YEARLY

✓ BEST VALUE

✓ ALL FEATURES

✓ PRIORITY SUPPORT

1<PricingCard
2  price="$399"
3  regularPrice="$588"
4  discountMessage="2 MONTHS FREE!"
5  title="ANNUAL PLAN"
6  priceSubtext="BILLED YEARLY"
7  highlights={['BEST VALUE', 'ALL FEATURES', 'PRIORITY SUPPORT']}
8>
9  <Button>START ANNUAL PLAN</Button>
10</PricingCard>

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
price*	`string`	-	Main price to display (e.g., "$199" or "CUSTOM").
regularPrice	`string`	-	Original price shown crossed out.
discountMessage	`string`	-	Discount callout text (e.g., "SAVE $100!").
title	`string`	`"ONE-TIME LIFETIME ACCESS"`	Header title text.
urgencyMessage	`string`	-	Pulsing urgency text (e.g., "OFFER ENDS SOON!").
priceSubtext	`string`	`"ONE TIME PAYMENT"`	Subtext below the price.
highlights	`string[]`	`[]`	Array of highlight badges.
trustLine	`string`	-	Trust/guarantee text at bottom.
headerCode	`string`	`"0x41"`	Terminal header code identifier.
children	`React.ReactNode`	-	CTA button or checkout component.
className	`string`	-	Additional CSS classes.

Usage

[ [0x5F] WITH STRIPE CHECKOUT ]

Integrate with Stripe for payment processing:

1'use client';
2
3import { PricingCard } from '@/components/ui/pricing-card';
4import { Button } from '@/components/ui/button';
5import { ArrowRight } from 'lucide-react';
6
7export function CheckoutCard() {
8  const handleCheckout = async () => {
9    const res = await fetch('/api/stripe/checkout', {
10      method: 'POST',
11      headers: { 'Content-Type': 'application/json' },
12      body: JSON.stringify({ priceId: 'price_xxx' }),
13    });
14    const { url } = await res.json();
15    window.location.href = url;
16  };
17
18  return (
19    <PricingCard
20      price="$199"
21      regularPrice="$299"
22      discountMessage="SAVE $100!"
23      urgencyMessage="LAUNCH SPECIAL!"
24      highlights={['LIFETIME ACCESS', 'ALL UPDATES']}
25      trustLine="30-day money-back guarantee."
26    >
27      <Button onClick={handleCheckout} className="w-full">
28        BUY NOW — $199 <ArrowRight className="ml-2 h-4 w-4" />
29      </Button>
30    </PricingCard>
31  );
32}

[ [0x5E] WITH POLAR CHECKOUT ]

Using Polar.sh for payment:

1import { PricingCard } from '@/components/ui/pricing-card';
2import { PolarCheckoutButton } from '@/components/polar/checkout-button';
3
4export function PolarPricingCard() {
5  return (
6    <PricingCard
7      price="$199"
8      highlights={['NO SUBSCRIPTION', 'UNLIMITED PROJECTS']}
9    >
10      <PolarCheckoutButton className="w-full">
11        GET ACCESS — $199
12      </PolarCheckoutButton>
13    </PricingCard>
14  );
15}

[ [0xBD] ENTERPRISE CONTACT FORM ]

Link to Calendly or contact form:

1import { PricingCard } from '@/components/ui/pricing-card';
2import { Button } from '@/components/ui/button';
3import Link from 'next/link';
4
5export function EnterpriseCard() {
6  return (
7    <PricingCard
8      price="CUSTOM"
9      title="ENTERPRISE"
10      priceSubtext="VOLUME LICENSING"
11      headerCode="0xEE"
12      highlights={['DEDICATED SUPPORT', 'CUSTOM SLA', 'ONBOARDING']}
13      trustLine="Talk to our team about your requirements."
14    >
15      <Link href="https://calendly.com/your-link" target="_blank">
16        <Button variant="outline" className="w-full">
17          SCHEDULE A CALL
18        </Button>
19      </Link>
20    </PricingCard>
21  );
22}

[ [0xE3] SIDE-BY-SIDE PRICING ]

Display multiple tiers together:

1<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
2  {/* Starter */}
3  <PricingCard
4    price="$49"
5    title="STARTER"
6    priceSubtext="PER MONTH"
7    highlights={['5 PROJECTS', 'BASIC SUPPORT']}
8  >
9    <Button variant="outline">SELECT STARTER</Button>
10  </PricingCard>
11
12  {/* Pro - Featured */}
13  <PricingCard
14    price="$199"
15    regularPrice="$299"
16    title="PRO"
17    urgencyMessage="MOST POPULAR"
18    highlights={['UNLIMITED', 'PRIORITY SUPPORT']}
19  >
20    <Button>SELECT PRO</Button>
21  </PricingCard>
22
23  {/* Enterprise */}
24  <PricingCard
25    price="CUSTOM"
26    title="ENTERPRISE"
27    priceSubtext="CONTACT SALES"
28    highlights={['VOLUME PRICING', 'DEDICATED REP']}
29  >
30    <Button variant="outline">CONTACT SALES</Button>
31  </PricingCard>
32</div>