Pricing Card

Pricing 1

About

Animated Pricing Card A responsive and theme-adaptive pricing card component built with TypeScript and shadcn/ui principles. It's highly reusable and features a subtle hover animation.

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

Code

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

Usage.tsx

import { PricingCard } from "@/components/ui/pricing-card";

// Data for the Personal Plan
const personalPlanFeatures = [
  "Allow multiple users to access and manage the finances",
  "Analyze your cash flow in detail to make informed decisions",
  "Automatically track and categorize expenses to save time",
  "Get personalized support with a dedicated account manager",
];

// Data for the Business Plan
const businessPlanFeatures = [
    "Allow multiple users to access and manage the finances",
    "Analyze your cash flow in detail to make informed decisions",
    "Automatically track and categorize expenses to save time",
    "Get personalized support with a dedicated account manager",
];

export default function PricingPageDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-4 md:p-8">
      <div className="flex flex-col items-center gap-8 md:flex-row md:items-start">
        <PricingCard
          variant="default"
          isPopular={true}
          planName="Personal Plan"
          price="$25"
          billingCycle="/month"
          description="All-In-One Solution for Business Finances"
          features={personalPlanFeatures}
          buttonText="Subscribe this plan"
          footnote="*Ideal for: Individuals looking to manage their personal finances with essential tools."
        />
        <PricingCard
          variant="primary"
          planName="Business Plan"
          price="$50"
          billingCycle="/month"
          description="All-In-One Solution for Business Finances"
          features={businessPlanFeatures}
          buttonText="Subscribe this plan"
          footnote="*Ideal for: Enterprises looking to manage their personal finances with essential tools."
        />
      </div>
    </div>
  );
}