Qreatify Pricing Plan Card

Component

About

Qreatify pricing plan card for subscription tiers, credit limits, highlights and upgrade CTAs.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Qreatify Pricing Plan Card to your project and fits it to your theme.

Code

How Qreatify Pricing Plan Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import QreatifyPricingPlanCard from "@/components/ui/qreatify-pricing-plan-card";

export default function QreatifyPricingPlanCardDemo() {
  return (
    <div className="max-w-sm bg-orange-50 p-6">
      <QreatifyPricingPlanCard
        name="Flame"
        eyebrow="Most Qreatify teams pick this"
        description="For serious app building with richer integrations, automations and more room for iteration."
        price="EUR 49"
        cadence="/month"
        icon="F"
        messageCredits="2,500 message credits"
        integrationCredits="1,000 integration credits"
        features={[
          "Unlimited apps and projects",
          "Built-in integrations",
          "Choose your AI model",
          "Custom domains",
        ]}
        recommended
        ctaLabel="Upgrade to Flame"
      />
    </div>
  );
}