Billing tray

Three plan cards with an annual billing switch.

Usage

import { TrayPricingCards } from '@/components/blocks/pricing-card-04'


<TrayPricingCards />


// Your own plans, starting on annual billing
<TrayPricingCards
  defaultBilling="annual"
  annualDiscountLabel="Save 20% with annual billing"
  onBillingChange={(billing) => track('billing', billing)}
  plans={[
    {
      name: 'Solo',
      icon: 'kite',
      monthlyPrice: 15,
      annualPrice: 12,
      description: 'For one person getting started.',
      features: ['3 projects', 'Email support', '1 seat'],
      ctaLabel: 'Start free trial',
      ctaHref: '/signup?plan=solo',
    },
    {
      name: 'Team',
      icon: 'twin-kites',
      monthlyPrice: 49,
      annualPrice: 39,
      description: 'For small teams shipping together.',
      features: ['Unlimited projects', 'Chat support', '10 seats'],
      featured: true,
      onSelect: (event) => {
        event.preventDefault()
        openCheckout('team')
      },
    },
  ]}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/pricing-card-04

npx shadcn@latest add @pastaui-pro/pricing-card-04

yarn dlx shadcn@latest add @pastaui-pro/pricing-card-04

bunx --bun shadcn@latest add @pastaui-pro/pricing-card-04

Source

Props

Billing tray props
Prop	Type	Default	Description
plans	TrayPlan[]	= Paperkite Starter, Growth and Scale plans	Each plan has a name, icon ('kite' \| 'twin-kites' \| 'flock'), monthlyPrice, annualPrice (the per-month rate on annual billing), description, features, ctaLabel, ctaHref, onSelect and a featured flag for the solid blue button.
annualDiscountLabel	string	= 'Save 15%'	Text in the blue savings chip beside each switch.
switchLabel	string	= 'Annually'	Visible label and accessible name of the billing switch.
currency	string	= '$'	Symbol placed before every price.
defaultBilling	'monthly' \| 'annual'	= 'monthly'	Billing period shown on first render.
onBillingChange	(billing: Billing) => void	= —	Called with the new billing period whenever a switch is flipped.
className	string	= —	Additional classes for the section.
style	CSSProperties	= —	Inline styles, handy for overriding the --pp-* theme variables such as --pp-primary, --pp-tray or --pp-roll.