Pricing Cards

Open in

Pricing

Choose the plan that works for you

Free

$0/user/mo

For students

✔Basic analytics and reporting
✔Essential functionalities
✔Standard customer support
✔Limited customization options
✔Basic operational needs
✔Basic analytics and reporting
✔Essential functionalities

ProPopular

$15/user/mo

Established businesses

✔Customizable solutions
✔Enterprise-grade security
✔Dedicated customer support
✔Advanced analytics
✔Scalable options
✔Customizable solutions
✔Enterprise-grade security

Enterprise

$99/user/mo

Large enterprises

✔Enterprise-level analytics
✔Tailored solutions
✔Dedicated customer support
✔Extensive integration options
✔Custom pricing
✔Enterprise-level analytics
✔Tailored solutions

Usage

import PricingSection from "../motionx/pricing-card";
 
export default function PricingDemo() {
  const plans = [
    {
      name: "Free",
      price: { monthly: 0, annual: 0 },
      description: "For students",
      features: [
        "Basic analytics and reporting",
        "Essential functionalities",
        "Standard customer support",
        "Limited customization options",
      ],
    },
    {
      name: "Pro",
      price: { monthly: 15, annual: 150 },
      description: "Established businesses",
      popular: true,
      features: [
        "Advanced analytics",
        "Priority customer support",
        "Custom integrations",
        "Unlimited projects",
      ],
    },
    {
      name: "Enterprise",
      price: { monthly: 99, annual: "Custom" },
      description: "Large enterprises",
      features: [
        "Enterprise-level analytics",
        "Dedicated customer support",
        "Custom pricing",
        "Advanced security",
      ],
    },
  ];
 
  return <PricingSection plans={plans} />;
}

Customization

Custom Styling

You can customize the appearance by passing additional CSS classes:

<PricingSection className="custom-pricing-section" plans={plans} />

Props

Prop	Type	Default	Description
`plans`	`Plan[]`	Required	Array of pricing plan objects
`className`	`string`	`""`	Additional CSS classes

Plan Object

Property	Type	Default	Description
`name`	`string`	Required	Name of the pricing plan
`price`	`PriceObject`	Required	Monthly and annual pricing
`description`	`string`	Required	Brief description of the plan
`features`	`string[]`	Required	List of features included
`popular`	`boolean`	`false`	Whether to highlight as popular

PriceObject

Property	Type	Description
`monthly`	`number`	Monthly price
`annual`	`number \| string`	Annual price or text