Component

Pricing Card

A self-contained pricing plan card with an optional badge, feature checklist, and a full-width CTA. Featured plans get a primary-colour ring to draw the eye.

Basic plan

A simple free-tier card with an outline CTA linking to the sign-up page.

Starter

Free

Perfect for side projects and personal use.

5 projects
Community support
1 GB storage

Get started

Featured plan

Set featured to highlight the recommended plan with a primary ring and a filled CTA. Add a badge for extra emphasis.

Pay-per-use text price

The price and period props accept any string, so usage-based pricing renders cleanly alongside fixed plans.

Pay-per-use

$0.001/ request

Scale as you go — no upfront commitment.

No seat limits
Usage-based billing
SLA available

Contact sales

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { PricingCard } from '@refraction-ui/react'

export function PricingSection() {
  return (
    <div className="grid grid-cols-1 gap-6 sm:grid-cols-3">
      <PricingCard
        name="Starter"
        price="Free"
        features={['5 projects', 'Community support', '1 GB storage']}
        cta="Get started"
        ctaVariant="outline"
        ctaHref="/signup"
      />
      <PricingCard
        badge="Most popular"
        name="Pro"
        price="$29"
        period="/ month"
        description="Everything you need to grow."
        features={['Unlimited projects', 'Priority support', '100 GB storage']}
        cta="Start free trial"
        featured
        ctaHref="/signup?plan=pro"
      />
      <PricingCard
        name="Pay-per-use"
        price="$0.001"
        period="/ request"
        description="Scale as you go — no upfront commitment."
        features={['No seat limits', 'Usage billing', 'SLA available']}
        cta="Contact sales"
        ctaVariant="outline"
        ctaHref="/contact"
      />
    </div>
  )
}

Props

Prop	Type	Default	Description
`name`	`string`	--	Plan name (e.g. "Pro", "Starter").
`price`	`string`	--	Price string (e.g. "$29", "Free").
`period`	`string`	--	Billing period or qualifier shown beside the price (e.g. "/ month").
`features`	`string[]`	--	List of included features rendered as a checklist.
`cta`	`string`	--	Label for the call-to-action button or link.
`ctaVariant`	`'default' \| 'outline'`	`'default'`	Visual style of the CTA. Use `default` (filled) on featured plans and `outline` on others.
`ctaHref`	`string`	--	When provided, the CTA renders as an `<a>` element navigating to this URL.
`onCtaClick`	`React.MouseEventHandler<HTMLButtonElement>`	--	Click handler for the CTA button (ignored when `ctaHref` is set).
`badge`	`string`	--	Optional badge label shown above the plan name (e.g. "Most popular").
`description`	`string`	--	Short marketing description shown beneath the price.
`featured`	`boolean`	`false`	Highlights the card with a primary-colour ring.
`className`	`string`	--	Additional CSS classes to apply to the card container.