Pricing Card

Open in

Starter

Perfect for side projects

$0/month

Up to 5 projects
Basic analytics
Email support
Custom domains
Team collaboration

Pro

For growing teams

$29/month

Unlimited projects
Advanced analytics
Priority support
Custom domains
Team collaboration

Installation

Usage

import { PricingCard } from "@/components/pioneerui/pricing-card"
 
const features = [
  { text: "5 projects", included: true },
  { text: "Custom domain", included: false },
]
 
export default function Pricing() {
  return (
    <PricingCard
      name="Pro"
      price={29}
      features={features}
      highlighted
      badge="Most popular"
    />
  )
}

Props

Prop	Type	Default	Description
`name`	`string`	—	Plan name (required)
`price`	`string \| number`	—	Price to display (required)
`features`	`PricingFeature[]`	—	Feature list (required)
`description`	`string`	`undefined`	Plan description
`period`	`string`	`/month`	Period suffix
`cta`	`string`	`Get started`	CTA button text
`onCtaClick`	`() => void`	`undefined`	CTA click handler
`highlighted`	`boolean`	`false`	Use primary color scheme
`badge`	`string`	`undefined`	Badge label above card